すでに何千もの異なる形式で既に質問されている本当にシンプルなCSS質問があります。CSSで3列のレイアウトを行うための決定的な方法
CSSを使用してHTMLページに3つの列を作成したいだけです。固定幅と液体の関係は重要ではありません：3列しか必要ありません。少なくとも、これはダウン真ん中下の左&右の列を推進している、Chromeの場合
<html>
<body>
<div id="left" style="float:left; width:300px;">
<h3>Column 1</h3>
</div>
<div id="right" style="float:right; width:300px;">
<h3>Column 3</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
</body>
</html>
：
はここで完全なHTMLページです。なにが問題ですか？
floatはオーダーメイドです。左、中央、右を入れてください。
中間セクションを浮かべてみましたか？
次のようなこの
<html>
<body>
<div id="left" style="float:left; width:300px;border:1px solid black;">
<h3>Column 1</h3>
</div>
<div id="middle" style='float:left;width:600px;border:1px solid black;'>
<h3>Column 2</h3>
</div>
<div id="right" style="float:left; width:300px;border:1px solid black;">
<h3>Column 3</h3>
</div>
</body>
</html>
がちょうど左にすべてをフロート
http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/を?:してみてください、と列があなたのHTML内の通常の順序で流れている可能性があります。
<div id="left">
<h3>Column 1</h3>
</div>
<div id="middle">
<h3>Column 2</h3>
</div>
<div id="right">
<h3>Column 3</h3>
</div>
CSS：
#left {
background-color: red;
float:left;
width:200px;
}
#middle {
background-color: salmon;
float:left;
width:200px;
}
#right {
background-color: pink;
float:left;
width:200px;
}
あなたがそれらをラップしたくない場合は、あなたがそれらの周りのコンテナのdivをラップ、または
body {
width: 600px; /*combined width of three columns*/
margin: 0 auto;
}
うんを使用することができ、これはうまくいって、ありがとう。 – AP257