*并在填充前一行时开始新行?
这应该有效,但对我不起作用,
html:
<div id="squares">
<div id="1">
width:150px;
height:150px;
</div>
<div id="2">
width:150px;
height:150px;
</div>
<div id="3">
width:150px;
height:150px;
</div>
</div>
所以这在页面上建立了 3 个框
css:
#squares {
display:inline;
background-color:#000000;
}
css 应该告诉他们排队并变黑,以便我们可以看到他们,以判断他们是否在正确的位置。
我需要添加什么吗?你能想出任何不同的方法来实现这个结果吗?
最佳答案
HTML
<div id="squares">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
CSS
#squares div {
/* these styles will let the divs line up next to each other
while accepting dimensions */
display: block;
float: left;
width: 150px;
height: 150px;
background: black;
/* a small margin to separate the blocks */
margin-right: 5px;
}
使用
float
的替代方法是使用 inline-block
样式:display: inline-block;
zoom: 1;
*display: inline;
关于html - 如何沿屏幕制作 150x150 正方形的 div,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/11871555/