div内のCSSレイアウトディビジョン

Question

別のdiv内に12個のdivをレイアウトしようとしています。マージン左はそれらのために働いていないようです。彼らはお互いに横たわって縦の列に現れます。あなたはあなたがそれらを横に並べて表示させたい場合は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 style="float:left;margin-left:10px;"> 
    Hello 
</div> 
<div style="float:left;margin-left:10px;"> 
    World! 
</div> 

はここで実証するjsFiddleです。

Answer 2

他のすべてのdivを保持する#mydivを持っています。次に#divleftと#divright。などのように定義フロートので：

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

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

Answer 3

次のいずれかが必要です。

#mydiv div {float: left;} 

または

#mydiv div {display: inline-block;}