Div標籤和對齊問題

我有我的Div標籤和浮動它們的以下情況。我有頁面的3個部分 - 標題，正文，頁腳。我的問題是與主（主體）部分。在該部分中，我添加了兩個div標籤來創建主體部分的左側和右側區域。我把leftCol漂浮在左邊。但rightCol比左邊的長，所以rightcol文本會在leftCol div下返回，我不希望那樣。我基本上想要在該身體部分創建兩個cols。這裏是我在下面做的基本的div結構。Div標籤和對齊問題

<div class="header"> 
</div> 
<div class="main"> 
    <div class="leftCol"></div> 
    <div class="rightCol"></div> 
</div> 
<div class="footer"> 
</div>

如何創建兩個帶有div標籤的列？

來源

2011-01-26 JPJedi

能否請您包括您的CSS？ – kjy112 2011-01-26 18:33:10

兩列的寬度可能超過'main'容器的寬度。請記住，填充是包含在每個的總寬度中。另外，爲兩列設置以下浮點數：

float：left;

來源

2011-01-26 18:35:30 IrishChieftain

-1

第1步：刪除div聲明。
第2步：使用表格。
第3步：放鬆，知道它只是工作。

我傾向於根據情況混合使用表格和div。如果我必須有2列布局，並且我想確保不僅瀏覽器兼容性，而且各種屏幕分辨率不會與佈局一起插入：我使用表格。

如果我沒有問題，或者甚至希望列下降到下一行，因爲寬度不可用，那麼我會使用div。

你所描述的，即使是你使用的措辭，也正是表格的用意。表格有列。漂浮的東西不。

來源

2011-01-26 18:36:46 NotMe

誘惑+1這只是因爲它很有趣。 – 2011-01-26 18:39:46

將兩列浮動到左側。這將導致兩列顯示在一起，按照文檔從左到右的順序排列。

來源

2011-01-26 18:36:51

將右列左浮動。確保您在浮動元素上指定寬度。

如果您想讓自己變得更輕鬆，請考慮使用藍圖或其他CSS佈局框架。

來源

2011-01-26 18:37:32

我也許有點晚了就這個問題，但如果你想使用div標籤表的行爲，你可以做如下：

<div class="header"> 
</div> 
<div class="main" style="display:table-row"> 
    <div class="leftCol" style="display:table-cell"></div> 
    <div class="rightCol" style="display:table-cell"></div> 
</div> 
<div class="footer"> 
</div>

來源

2011-11-17 11:19:31

Div標籤和對齊問題

回答

相關問題