Html 固定大小的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1978103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed size div?
提问by Sampson
I want a normal div for the body of my text and a bunch of little divs that are exactly 150px by 150px. How might i do this?
我想要一个普通的 div 用于我的文本正文和一堆正好是 150px x 150px 的小 div。我该怎么做？
回答by Sampson
This is a fairly trivial effect to accomplish. One way to achieve this is to simply place floated divelements within a common parent container, and set their width and height. In order to clear the floated elements, we set the overflowproperty of the parent.
这是一个相当微不足道的效果。实现这一点的一种方法是简单地将浮动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>
The CSS resembles the strategy outlined in the first paragraph above:
CSS 类似于上面第一段中概述的策略：
.container {
width: 450px;
overflow: auto;
}
.cube {
float: left;
width: 150px;
height: 150px;
}
You can see the end result here: http://jsfiddle.net/Qjum2/2/
你可以在这里看到最终结果：http: //jsfiddle.net/Qjum2/2/
Browsers that support pseudo elements provide an alternative way to clear:
支持伪元素的浏览器提供了另一种清除方式：
.container::after {
content: "";
clear: both;
display: block;
}
You can see the results here: http://jsfiddle.net/Qjum2/3/
你可以在这里看到结果：http: //jsfiddle.net/Qjum2/3/
I hope this helps.
我希望这有帮助。
回答by Ralph The Mouf
You can also hard code in the dimensions in your html code as opposed to putting the desired dimensions in a style sheet
您还可以在 html 代码中的维度中进行硬编码，而不是将所需的维度放在样式表中
<div id="mainDiv">
<div id="mydiv" style="height:150px; width:150px;">
</div>
</div>
回答by Midas
As reply to Jonathan Sampson, this is the best way to do it, without a clearing div:
作为对 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>
回答by Jason
.myDiv { height: 150px; width 150px; }
<div class="mainDiv">
<div class="myDiv"></div>
<div class="myDiv"></div>
<div class="myDiv"></div>
</div>
回答by mscccc
You can set the heightand widthof your divswith css.
您可以设置height和width您的divs使用css。
<style type="text/css">
.box {
height: 150px;
width: 150px;
}
</style>
Is this what you're looking for?
这是你要找的吗？
回答by switz
<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>
css:
css：
.smallDiv { height: 150px; width: 150px; }
