html - div を右揃えにしないでください。

Question

中央の div のコンテンツが非常に広い場合、赤いボックスを一番上の行に表示するにはどうすればよいですか? 中央の div のコンテンツが多い場合、赤い div は別の行に移動します。なぜこれが起こるのか知っていますか？

私のコードを見てください: http://jsfiddle.net/5dC6T/3/

Answer 1

<div>問題は、要素を注文した方法にあります。試す：

<div>
    <div class="red-box"></div>
    <img class="photo" alt="" />
    <span>Name</span>
    <span>Data</span>
    <span>City</span>
</div>

CSS:

/* These two will stay anchored on the right and left */
.red-box { float: right; }
img.photo { float: left; }

現在のコードにこれらの変更を加えました: http://jsfiddle.net/Wexcode/38qYS/

Answer 2

この CSS を使用します。

#QuadroEvento div.TopoEvento div.euvou{
    height: 90px;
    width: 90px;
    background-color: red;
    position: absolute;
    right: 0px;
    margin-right: 0px;
}​

キーは次のとおりです。position: absolute;

なども使用できますposition: fixed;。詳細については、こちらを参照してください: http://www.w3schools.com/cssref/pr_class_position.asp