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

拥有包含所有其他div的#mydiv。然后#divleft和#divright。使用float定义如下：

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

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