1

これは簡単なように思えますが、うまくいきません :/ すべての要素の幅の合計が 100% 未満であるのに、すべての要素が互いに隣り合ってうまく収まらないのはなぜですか?

わかりにくかったらごめんなさい。.square1 番目の青の下に左に押し戻されるのではなく、3 番目の青が下に移動して右にとどまるのはなぜ.squareですか?

どんな助けでも大歓迎です！

<div class="outer">
    <div class="square"></div>

    <div class="bigsquare"></div>

    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

.outer {position:absolute;width:80%;left:10%;height:100%;border:solid black 2px;
}
.square {
    height: 16%;width: 19%;border-radius: 0px;border:solid 1px #262626;float: left;margin:0px;overflow: hidden;position: relative;padding:0px;background-color:blue;
}

.bigsquare { height: 50%;    width: 57%;border-radius: 6px;background-color:green;border:solid 0px #262626;float: left;    overflow: hidden;position: relative;
    padding:0px;
}
4

1 に答える 1

1

更新しました：

「Float：left」は、要素を左マージンまで揃えません。別の要素に出会ってブロックするまで、可能な限り左に移動します。この場合、青いdivは、緑のdivに出会うまで左に浮きます。

絶対位置を使用するか、3つの「列」として配置することができます。青いdiv、緑のdiv、青いdivの中央の列。そして最後の列は青いdiv

アップデート2：

たぶん、それらをビルディングブロックと考えると役立つかもしれません。青-緑-青は一番上の行に収まります。次の青は下に移動しません。左マージンに移動しようとしますが、緑のブロックが邪魔になり、緑のブロックを通過できません。それは理にかなっていますか？

于 2012-05-17T19:24:56.093 に答える