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

你需要的，如果你希望它们出现并排侧漂浮的div：

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

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

这里有一个jsFiddle证明。

Answer 2

有#mydiv它拥有所有其他divs。然后#divleft和#divright。随着浮动的定义是这样的：

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

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

Answer 3

您需要用：

#mydiv div {float: left;} 

或

#mydiv div {display: inline-block;}