CSS：沒有垂直列布局<table>

Question

好吧，我在2001年把html＆css傾斜了。我習慣做這樣的事情（要創建一個帶有“垂直列”布局的網站）：

<html>
<head>
    <title>Vertical-column layout</title>
</head>
<body>
<table id="doc" >
<!-- header -->
    <tr>
    <td id="header" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / header -->

<!-- / content -->
    <tr>
    <td id="col1" name="menu"><!-- content code/php include --></td>
    <td id="col2" name="content_left"><!-- content code/php include --></td>
    <td id="col3" name="content_right"><!-- content code/php include --></td>
    </tr>
<!-- / content -->

<!-- footer -->
    <tr>
    <td id="footer" colspan="3"><!-- header code/php include --></td>
    </tr>
<!-- / footer -->
</table>
</body>
</html>

容易，一切都按照我想要的方式自動對齊，沒有css頭痛等等。那時候生活很美好。 然而，不久前，我讀到這種方法不應再使用了。 我打算嘗試使用一堆div的新方法，但w3c和w3c的驗證不喜歡你使用塊元素作為內聯元素... WTF !!!

所以...我的沮喪讓我問你們：

怎么樣？ 如何以“現代方式”完成這樣的事情......盡可能簡單？ html 5有更好的方法嗎？
為什么？ 為什么現在我們不應該使用這種表格方法在網站上獲得“垂直列布局”？

Answer 1

HOW?

選項1：Google的“CSS 3列布局”。 在過去6年左右的時間里，這已經得到了很好的報道，並且有大量的教程。

選項2：Google“CSS框架”並選擇一個來構建您的布局。 960.gs是一個受歡迎的。

WHY?

理想情況下，您將表格用於表格數據，而css則用於布局頁面的其余部分。 為什么？ 那么，理論上，CSS為您提供了更多的靈活性。 最好的例子可能是響應式網頁設計。 在iPhone上，我可能需要2列。 在我的iPad上，我可能需要4列。 這一切都可以通過CSS來完成，但如果使用表格硬連接HTML，則會變得非常復雜。

Answer 2

下面是我拼湊在一起的基本網格，您可以使用任何規模的網站。 您需要使用隱藏溢出或clearfix清除列上的浮動。 如果您的項目不需要支持IE7，您可以使用box-sizing邊框為您的列添加填充，否則在每列中添加一個額外的元素用於填充。

雖然我可以理解，使用表格制作列非常容易，但這對於布局來說幾乎是唯一的。

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <header></header>

    <div class="content grid">
        <div id="col1" class="col s1of3"></div>
        <div id="col2" class="col s1of3"></div>
        <div id="col3" class="col s1of3"></div>
    </div>

    <footer></footer>

</body>
</html>

CSS：

.grid {
}
    .grid .col { float: left; }

    .grid .col.s1of1 { width: 100%; }
    .grid .col.s1of2 { width: 50%; }
    .grid .col.s1of3 { width: 33.33333333%; }
    .grid .col.s2of3 { width: 66.66666666%; }
    .grid .col.s1of4 { width: 25%; }
    .grid .col.s3of4 { width: 75%; }
    .grid .col.s1of5 { width: 20%; }
    .grid .col.s2of5 { width: 40%; }
    .grid .col.s3of5 { width: 60%; }
    .grid .col.s4of5 { width: 80%; }

Answer 3

CSS3有一些簡潔的列布局選項，但它們的兼容性不是很好，並且大量瀏覽器不支持相當數量的選項。

如果您正在尋找可變/固定寬度的列，那么這可能是您正在尋找的文章：

http://www.alistapart.com/articles/holygrail

使用此方法，您可以將一個或多個div設置為固定寬度，同時適當調整其他大小以填充頁面。

如果您只想讓所有列都調整大小，那么只需將它們全部float: left和width: {percentage of page}%

CSS：沒有垂直列布局<table>

問題描述

3 個解決方案

解決方案1
6 2012-06-04 19:57:15

解決方案2
5 已采納 2012-06-06 15:31:16

解決方案3
2 2012-06-04 19:58:17

CSS：沒有垂直列布局<table>

問題描述

3 個解決方案

解決方案1 6 2012-06-04 19:57:15

解決方案2 5 已采納 2012-06-06 15:31:16

解決方案3 2 2012-06-04 19:58:17

解決方案1
6 2012-06-04 19:57:15

解決方案2
5 已采納 2012-06-06 15:31:16

解決方案3
2 2012-06-04 19:58:17