CSS 多列布局问题简单解决方案

前端  /  管理员 发布于 7年前   237

多列等高的问题

 

上例中有包含不同内容的 3 列，可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高？或具体的说，如何使所有列的高度等于最高列的高度？这很棘手，因为我们不清楚每列将会多高，哪一列是最高的。不能简单的给所有列一个固定的高度，如果内容很少将会导致页面底部有大片空白；如果内容太多则会在文字显示完全前关闭。两种情形都不妥。实际上，内容的长度是动态的，所以每列的高度也是动态的。必须意识到 Web 上没有固定的东东，乡民们有不同的屏幕分辨率，浏览器中的文字也可能被设置为任意大小，所有这些都会影响内容的高度。

分离列内容与其背景色

解决等高问题的第一步是把能分离的破开。方法是每列用两个 div 替代原来的一个。第一个 div 用来放内容，另一个用来作背景色。分离使我们可以单独控制这些额外的元素，之后用更有效的方法把它们放在一起。答案呼之欲出。

浮动的容器的高度始终取决于其浮动的内容（高度）

这是本文多列等高方法的核心。 使一个 div 的高度等于最高列高度的唯一方法是这个 div 包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。

 

3列 HTML div 结构

上例中 3 个内容列在一个 div 容器中。

<div id="container1">    <div id="col1">Column 1</div>    <div id="col2">Column 2</div>    <div id="col3">Column 3</div></div>

3 列 CSS

下面是使 div 容器等高于最高列的 CSS。

#container1 {    float:left;    width:100%;}#col1 {    float:left;    width:30%;    background:red;}#col2 {    float:left;    width:40%;    background:yellow;}#col3 {    float:left;    width:30%;    background:green;}

为了让这一结构在所有浏览器中正确工作，容器 div 必须浮动（左或右），同时每一个内容列的 div 也要浮动，哪种方式并不重要。浮动内容 div 的进程使它们在页面中排列在一条水平线上。浮动容器使其自适应到最高列的高度。如果不浮动容器，内容 div 将会从容器底部溢出，容器不会拥有正确的高度。事实上在此例中，容器不浮动的话其最终高度为0。

增加额外嵌套的容器

下一步是增加额外的容器，它们彼此嵌套。我们需要容器的数量等于列的数量：3。这 3 个容器用作各列的背景。请注意，我们去除了原始列的背景色，并将其加至容器上。

 

3列 HTML div 结构

两个额外的容器加至下面的 HTML 中。

<div id="container3">    <div id="container2">        <div id="container1"><div id="col1">Column 1</div><div id="col2">Column 2</div><div id="col3">Column 3</div>        </div>    </div></div>

3 列 CSS

所有元素左浮动，容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。

#container3 {    float:left;    width:100%;    background:green;}#container2 {    float:left;    width:100%;    background:yellow;}#container1 {    float:left;    width:100%;    background:red;}#col1 {    float:left;    width:30%;}#col2 {    float:left;    width:40%;}#col3 {    float:left;    width:30%;}

用相对定位移动容器

现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%，为了显示中间的黄色列 container1 向左移动了40%，与此同时红色部分依然可见作为左侧列。

 

相对定位的 CSS

下面是添加了相对定位的CSS。

#container3 {    float:left;    width:100%;    background:green;}#container2 {    float:left;    width:100%;    background:yellow;    position:relative;    right:30%;}#container1 {    float:left;    width:100%;    background:red;    position:relative;    right:40%;}#col1 {    float:left;    width:30%;}#col2 {    float:left;    width:40%;}#col3 {    float:left;    width:30%;}

将每列的内容移回

下一步是把每列的内容移回到页面上，使之排列在下面的背景色上。再次使用简单的相对定位来完成它。

 

最后在最外面的容器 container3 上添加overflow:hidden，砍去超出容器的部分。

 

相对定位的 CSS

下面是增加了相对定位和溢出的 CSS 规则。请注意 container3 上额外的position:relative; 这是为了解决一个 IE bug ，阻止overflow:hidden;工作。

#container3 {    float:left;    width:100%;    background:green;    overflow:hidden;    position:relative;}#container2 {    float:left;    width:100%;    background:yellow;    position:relative;    right:30%;}#container1 {    float:left;    width:100%;    background:red;    position:relative;    right:40%;}#col1 {    float:left;    width:30%;    position:relative;    left:70%;}#col2 {    float:left;    width:40%;    position:relative;    left:70%;}#col3 {    float:left;    width:30%;    position:relative;    left:70%;}

对列增加 padding

最后还需对列增加 padding，这样每列边缘的文字不至于显得拥挤。如果我们增加 padding，一些浏览器中可能正常显示，但不是所有。IE 错误的盒模型，导致其估算拥有 padding 的元素宽度异常。一个 200px 宽 20px padding 的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。padding 应该加在元素的宽度上。凸微软！

不过不用担心...我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的 padding），之后用相对定位把它们移至正确的位置。在我们的例子中我们用了 2% 的 padding，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

 

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是 IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

#container3 {    float:left;    width:100%;    background:green;    overflow:hidden;    position:relative;}#container2 {    float:left;    width:100%;    background:yellow;    position:relative;    right:30%;}#container1 {    float:left;    width:100%;    background:red;    position:relative;    right:40%;}#col1 {    float:left;    width:26%;    position:relative;    left:72%;    overflow:hidden;}#col2 {    float:left;    width:36%;    position:relative;    left:76%;    overflow:hidden;}#col3 {    float:left;    width:26%;    position:relative;    left:80%;    overflow:hidden;}

好了，就是这样。我希望这篇文章对你有用。可以自己弄一下 CSS 看一下它是如何工作的。你可以搞很多列，只要容器和内容列的数目相等。不要忘记看看我的 demo：2 列 ， 3 列， 4 列，以及 5 列。