CSS Layout Divs в Divs

Question

Я пытаюсь разместить 12 divs внутри другого 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

Вы должны плавать в дивы, если вы хотите, чтобы они появились бок о бок:

Fix: Указанный класс вместо стиля для встроенный стиль.

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

Вот jsFiddle продемонстрировать.

Answer 2

Имейте #mydiv, который содержит все ваши другие div. Затем #divleft и #divright. С поплавка определяется как например:

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

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

Answer 3

Вам нужно либо:

#mydiv div {float: left;} 

или

#mydiv div {display: inline-block;}