Question

我有一个非常非常简单的CSS问题，已经在这里以不同的形式提出了一千次，并且似乎没有明确的答案。

我只想在HTML页面上使用CSS创建三列。固定宽度与液体无关：只需要三根柱子。

这是一个完整的HTML页面：

<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>

至少在Chrome中，这是推动左派和右列在中间下方。有什么问题？

Answer 1

像这样？：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;
}

http://jsfiddle.net/SebastianPataneMasuelli/Xu5c6/1/

Answer 2

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>

在CSS中进行三列布局的明确方法

2 个答案: