確定在CSS中做三列布局的方法

我有一個非常簡單的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中，至少，這是推向左向右&列攔腰下方。哪裏不對？

來源

2010-11-22 AP257

浮動對訂單敏感。把左邊，然後中間，然後右邊。
您是否嘗試過浮動中段？

你可以試試這個

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

來源

2010-11-22 20:39:43 JAL

沒錯，這工作，謝謝。 – AP257 2010-11-22 21:02:32

這樣？：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/

來源

2010-11-22 20:40:26

確定在CSS中做三列布局的方法

回答

相關問題