html - float right は常に div を右下に移動します

Question

これが私のコードの例を使ったサンプルフィドルです:

http://jsfiddle.net/V5KHy/2/

私が抱えている問題は、クラスを持つdivにあります:

col r no-padding

計算された css では、次のように評価されます。

.cols.two.alt > .col.r {
      padding: 0 10px;
      float: right;
      width: 27%;
}

この div が最初の ul の隣の上ではなく右下にあるのはなぜですか?

Answer 1

これは、HTML に要素を配置した順序が原因で発生しています。要素をフロートすると、その前にあるものではなく、その後にあるものに対してのみフロートします。したがって、次のような構造がある場合:

<ul>
    <!-- stuff -->
</ul>
<div style='float: right;'>
    <!-- stuff -->
</div>

div は常にul の下に表示されます。これは、HTML マークアップでこのように編成されているためです。div を ul の右側に配置する場合は、順序を変更する必要があります。

<div style='float: right;'>
    <!-- stuff -->
</div>
<ul>
    <!-- stuff -->
</ul>

これにより、div が ul の右側に配置されます。コンテンツをフローティングする場合は、横に配置したいものの前にフローティングする必要があることを常に覚えておいてください。