*并在填充前一行时开始新行?
这应该有效,但对我不起作用,
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/

10-11 22:53
查看更多