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;

Answer 2

你缺少一个div语句，表明它必须应用于id为“square”的div内的div：

css:
#squares div {
display:inline;
background-color:#000000;
}

Answer 3

最好的方法是使用display：inline-block;

HTML

<div id="squares">
<div id="1" class="square">
</div><div id="2" class="square">
</div><div id="3" class="square">
</div>
</div>

请注意HTML标记是如何格式化的，在使用display inline-block（check this）

时避免在元素之间获得额外的边距很重要

CSS：

.square {
background-color: #000;
display: inline-block;
height: 150px;
vertical-align: top;
width: 150px;
*display: inline;
zoom: 1;
}

出于开发目的，您可以添加： CSS：

.square {outline: 1px solid red;}

所以你可以在不破坏布局的情况下看到它们的尺寸（通过扩展元素的自然宽度）

Answer 4

我想你错过了;

div {float:left;}

Answer 5

如果我理解正确，你希望每个div＃1＃2和＃3的宽度和高度都是150px，在这种情况下

你想要定位每个div而不是主要的div，如此

#squares > div {
    display:block;
    float:left;
    width:150px;
    height:150px;
    background-color:#000000;
    margin-right:5px;
}

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

5 个答案: