css - DIV を右に揃える

Question

このCSSで一連のレイヤーを使用しています

.left1 {
    float: left;
    left: 5px;
    width: 72px;
    height: 100px;
}
.left2 {
    height: 100px;
    background-color: red;
    margin-left: 186px;
}
.eventCat {
    float: right;
    width: 5px;
    height: 100px;
}

インライン div を作成します。ただし、右揃えにしたいレイヤーを追加すると、下に落ちているようです（緑色のレイヤー.eventCat）。赤いボックスの右側にあるはずです。float:right;何が欠けているのですか？

私はフィドルを作りました.. http://jsfiddle.net/7GBca/いじる:)

Answer 1

フローティングされていないため、正しくフローティングされていません.float2。私の推測では、使用可能なすべての幅を埋めるために拡張したいので、明示的な幅を設定しなかったのです。.eventCat正しく整列するための1つの解決策は、使用position:absolute;して使用することですright:0;

.wrapper {
    position: relative; 
}
.eventCat {
    position: absolute;
    right: 0;
    top: 0;
    width: 5px;
    height: 100%;
}
.left2 {
    padding-right: 5px; /*set this to the width of .eventCat so it does not overlap*/
}

フィドルの例

Answer 2

これを修正する最も簡単な方法は、緑色の div に負のトップ マージンを設定することです。

.eventCat {
  margin: -100px 0 0 0;
  float: right;
  width: 5px;
  height: 100px;
}

フィドルの例

Answer 3

「left2」の「width: ...px」と「float: left」、「wrapper」の「width: ...px」がありません。