在css中可以实现类似1-2-1固定宽度布局的横向多列布局方法有哪些

在css中可以实现类似1-2-1固定宽度布局的横向多列布局方法有哪些

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

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

3列 HTML div 结构如下：Column 1 Column 2 Column 3

3 列 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 中。Column 1 Column 2 Column 3

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如下：#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如下：请注意 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 列。2024-12-16