3列布局答案 - 爱码网

【问题标题】：3 column layout3列布局
【发布时间】：2011-06-24 10:29:51
【问题描述】：

这就是我想要做的。

我想要三列的布局。让我们称它们为左、中和右列。当 main 的内容增加左右列的高度也增加时，我不知道该怎么办？

【问题讨论】：

标签： html css

【解决方案1】：

我建议查看this link 以获取 3 列液体布局的绝佳示例。只需查看 HTML 和 CSS 示例的源代码即可。他还提供了各种其他布局的示例（请参阅页面顶部的选项卡）。

【讨论】：

【解决方案2】：

这是一个很棒的网站：http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts，它有一大堆不同的布局，都是基于 CSS 的。

【讨论】：

这是我经常提到的那个人。我真的很喜欢他的布局。

【解决方案3】：

HTML：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>3 Columns</title>    
</head>

  <body>
    <div class="container">

    <div class="left">
    <h3>Left Column</h3>
    </div>

    <div class="center">
    <h3>Center column</h3>           
    /div>

    <div class="right">
    <h3>Right column</h3>
    </div>

    </div> <!-- /container -->

    </body>
</html>

CSS：

.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}

在此处查看演示： http://jsfiddle.net/z2SLL/1/

【讨论】：

谢谢，但这不是我想要的

【解决方案4】：

我强烈建议不要使用 <table> 元素，因为出于语义原因，我们不是在谈论显示表格数据。

相反，使用“table”、“table-row”和“table-cell”等值来利用显示属性。这是一个演示：http://jsfiddle.net/teddyrised/DLaCW/20/。可以看到，虽然每一列的内容有所不同，但它们的整体高度都遵循最高的<div>。

【讨论】：

【解决方案5】：

也许你需要的是仿列技术。查看here、here 和here。

如果您需要它是流动的或没有图像（无论出于何种原因），那么您可能必须使用一些 JavaScript，例如 this example 或者您可以检查 this weird example。

无论如何，由于存在很多变数和不同的解决方案，因此提供的信息很少。

【讨论】：