css - div中的CSS布局div

Question

我正在尝试在另一个 div 中布局 12 个 div。似乎左边距对他们不起作用。它们出现在垂直列中，而不是彼此相邻。

div id="wrapper">
<div id="mydiv">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>

CSS

wrapper{
width:952px;
height:602px;
margin: 0px auto;
position:relative;
}
#mydiv{
position:absolute;
left:150px;
width:600px;
height:375px;
border: 1px solid black;
padding:10px;
color:#FF0080;
background-color:#FF0000;

}
#mydiv div{
width:180px;
height:100px;
background-color:#000000;
margin-left:20px;
margin-top:10px;
}

Answer 1

您需要：

#mydiv div {float: left;}

或者

#mydiv div {display: inline-block;}

Answer 2

如果您希望它们并排显示，则需要浮动 div：

修复：指定类而不是内联样式的样式。

<div style="float:left;margin-left:10px;">
    Hello
</div>
<div style="float:left;margin-left:10px;">
    World!
</div>

这是一个jsFiddle来演示。

Answer 3

有 #mydiv 包含所有其他 div。然后是#divleft 和#divright。浮动的定义如下：

#divleft {
    position: relative;
    float: left;
}

#divright {
    float: right;
    position: relative;
}