0

いつもフロートを使っていました。おそらくそれが最善の方法ではないことを認識しています。位置相対で試してみます。myDiv の子がお互いを無視しないのはなぜですか? インラインブロックではないので？

<div class="myDiv">
    <div class="myDiv1"></div>
    <div class="myDiv2"></div>
    <div class="myDiv3"></div>
    <div class="myDiv4"></div>
</div>

.myDiv
{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    width: 100px;
    height: 100px;
    background-color: grey;
}

.myDiv1
{
    background-color: green;
    width: 10px;
    height: 10px;
    position: relative;
    top: 10px;
    left: 10px;
}

.myDiv2
{
    background-color: red;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 30px;
}

.myDiv3
{
    background-color: blue;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 50px;
}

.myDiv4
{
    background-color: yellow;
    width: 10px;
    height: 10px;
    position: relative;
    top: 0px;
    left: 70px;
}

http://jsfiddle.net/VLk6m/2/

4

2 に答える 2

1

これは予期される動作です。 MDN のドキュメントを参照してください

要素が配置されていないかのようにすべての要素をレイアウトし、レイアウトを変更せずに要素の位置を調整します (したがって、要素が配置されていなかった場合に要素にギャップが残ります)。

于 2013-05-18T12:58:18.853 に答える
0

ここで何をしようとしているのか正確にはわかりませんが、それらをすべて同じ行に配置したい場合は、 float を使用するか、に設定する必要がありdisplayますinline-block。それ以外の場合は、display: block「行」全体を占有し、それらを同じ行に配置したいことを知りません。

于 2013-05-18T15:19:54.477 に答える