固定大小的div？

Question

我想要一个普通的div用于我的文本正文和一堆小div,正好是150px到150px.我怎么能这样做？

Answer 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/

我希望这有帮助.

Answer 2

您还可以在html代码的维度中进行硬编码,而不是在样式表中放置所需的尺寸

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

Answer 3

作为对Jonathan Sampson的回复,这是最好的方法,没有清算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>

Answer 4

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

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