3列布局

-1

这是我正在尝试做的。3列布局

我想要三列布局。让我们称他们为左，中，右列。我无法弄清楚当主要的内容增加左右列的高度时又该怎么做呢？

来源

2011-06-23 jingo

我建议检查出this link为3列液体布局的一个很好的例子。只需查看HTML和CSS示例的源代码即可。他还提供了各种其他布局的示例（请参阅页面顶部的选项卡）。

来源

2011-06-23 06:46:10

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

来源

2011-06-23 06:46:29

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

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/

来源

2011-06-23 06:49:52 Roman

谢谢，但这不是我想要的 – jingo

我会强烈建议不要使用<table>元素，因为语义的原因简单地说，我们并不是在讨论显示列表数据。

改为使用“table”，“table-row”和“table-cell”等值来利用显示属性。这里是一个演示：http://jsfiddle.net/teddyrised/DLaCW/20/。您可以看到，虽然每列的内容各不相同，但它们的总体高度仍然高于<div>。

来源

2011-06-23 09:31:12 Terry