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

时间:2010-11-22 20:34:13

标签: css

我有一个非常非常简单的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中,这是推动左派和右列在中间下方。有什么问题?

2 个答案:

答案 0 :(得分:2)

像这样?: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/

答案 1 :(得分:1)

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