如何在屏幕上制作150x150的正方形div

Question

*并在填充前一行时开始新行？
这应该工作但不适合我,
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应该告诉他们排队并且是黑色的,以便我们可以看到它们,以便在他们是否在正确的地方时进行测量.
我需要添加任何东西吗？您能想到实现这一结果的任何不同方法吗？

Answer 1

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;