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>

Answer 5

您可以使用height设置width的{{1}}和divs。

css

这是你要找的吗？

Answer 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; }

固定大小的div？

6 个答案: