Фиксированный размер div?

Ответ 1

Это довольно тривиальный эффект. Один из способов добиться этого - просто разместить плавающие элементы div в общем родительском контейнере и установить их ширину и высоту. Чтобы очистить флотируемые элементы, мы устанавливаем свойство overflow родительского элемента.

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

CSS похож на стратегию, изложенную в первом абзаце выше:

.container {
    width: 450px;
    overflow: auto;
}

.cube {
    float: left;
    width: 150px; 
    height: 150px;
}

Вы можете увидеть конечный результат здесь: http://jsfiddle.net/Qjum2/2/

Браузеры, поддерживающие псевдоэлементы, предоставляют альтернативный способ очистки:

.container::after {
    content: "";
    clear: both;
    display: block;
}

Вы можете увидеть результаты здесь: http://jsfiddle.net/Qjum2/3/

Надеюсь, это поможет.

Ответ 2

Вы также можете жестко кодировать размеры в своем html-коде, а не вносить желаемые размеры в таблицу стилей

<div id="mainDiv">
    <div id="mydiv" style="height:150px; width:150px;">
    </div>
</div>

Ответ 3

Как ответ Джонатану Сэмпсону, это лучший способ сделать это без разделителя div:

.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }

<div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

Ответ 4

.myDiv { height: 150px; width 150px; }

<div class="mainDiv">
   <div class="myDiv"></div>
   <div class="myDiv"></div>
   <div class="myDiv"></div>
</div>

Ответ 5

Вы можете установить height и width вашего divs с помощью css.

<style type="text/css">
.box {
     height: 150px;
     width: 150px;
}
</style> 

Это то, что вы ищете?

Ответ 6

<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>

CSS

.smallDiv { height: 150px; width: 150px; }