このCSSで
#left { background: red; float: left; width: 100px; height: 100px;}
#right { background: green; float: right; width: 100px; height: 100px;}
#center { background: blue; height: 100px; margin-left: 110px; margin-right: 110px; }
そしてこのhtml
<div id='left'></div>
<div id='right'></div>
<div id='center'></div>
固定列、可変列、別の固定列を作成します。
順序が左、右、中央の場合、期待どおりに機能します http://jsfiddle.net/6X4fN/5/。
ただし、左、中央、右を配置すると、右の div が次の行http://jsfiddle.net/6X4fN/6/にプッシュされます。
なぜこれが起こるのかについての説明を探しています。私が理解している方法では、2 つのフローティング div がドキュメント フローから削除され、中央の div がマージンで縮小されます。これを考えると、div の順序がこのレイアウトに影響する理由がわかりません。右側の div はフローティングされているため、中央の div はそれを次の行に押し出すべきではありません。