在CSS中進行三列布局的明確方法

Question

我有一個非常非常簡單的CSS問題，在這里已經以不同的形式提出了1000遍，似乎沒有確定的答案。

我只想使用CSS在HTML頁面上創建三列。 固定寬度與液體無關緊要：只需要三列。

這是完整的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

浮動對訂單敏感。 放在左邊，然后放在中間，然后放在右邊。
您是否也嘗試過浮動中間部分？

你可以試試這個

<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 個解決方案

解決方案1
2 2010-11-22 20:40:26

解決方案2
1 已采納 2010-11-22 20:39:43

在CSS中進行三列布局的明確方法

問題描述

2 個解決方案

解決方案1 2 2010-11-22 20:40:26

解決方案2 1 已采納 2010-11-22 20:39:43

解決方案1
2 2010-11-22 20:40:26

解決方案2
1 已采納 2010-11-22 20:39:43