0

別の div 内に 12 個の div をレイアウトしようとしています。margin-left が機能していないようです。それらは、互いに横に並んでいるのではなく、縦の列に表示されます。ここに画像の説明を入力

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;
}
4

3 に答える 3

2

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

#mydiv div {float: left;}

また

#mydiv div {display: inline-block;}
于 2012-05-11T19:35:36.080 に答える
1

div を並べて表示する場合は、div をフロートする必要があります。

修正: インライン スタイルのスタイルの代わりにクラスを指定しました。

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

デモ用のjsFiddleを次に示します。

于 2012-05-11T19:32:37.203 に答える
1

他のすべての div を保持する #mydiv を用意します。次に #divleft と #divright です。フロートが次のように定義されている場合:

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

#divright {
    float: right;
    position: relative;
}
于 2012-05-11T19:34:06.257 に答える