1

如何制作具有相同高度的多个列，每个部分之间有一个边框并保持响应...（见下图）。我知道如果您有两列，则可以使用背景图像，但是当有更多列时，整个响应部分都会继续进行。

编辑：这是我制作的 jsfiddle：http: //jsfiddle.net/kF9LA/

所需布局的模型

4

4 回答 4

2

那么两张背景图像呢，一张的边框距左侧 1/3，另一张的边框距右侧 1/3 呢？background-position:33.3% 0;然后分别用和将它们应用到一对容器中background-position:66.6% 0;。

类似于使用中间有边框的单个图像，并且background-position:50% 0;

编辑：

运行快速测试后，这似乎有效，而且流畅/响应迅速。

HTML

<div class="container">
    <div class="bg1">
        <div class="bg2">
            <div class="content">...</div>
        </div>
    </div>
</div>

CSS

.container {width:100%; border:2px solid #000;}

/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}

编辑2：

height:200px;从 .content 中删除，并在demo中添加了一些文本内容，以显示高度可以根据内容增长。将两个 bg 图像替换为单个 2x1 图像。

于 2012-06-14T18:31:31.880 回答
1

我在这里的一个类似线程中有几个答案。最好的方法完全取决于您是否需要用户直观地看到 div 的高度相同。如果您的最终站点看起来像这个模型（唯一的视觉提示是边框），您不一定需要使用 MJT 的方法，而是可以使用背景图像，像这样。

如上面链接中的评论所述，此方法不适用于水平流动布局，但如果您有固定宽度的布局，则可以将背景图像用于任意数量的列。只要确保你的数学是正确的:)

但是，如果您的布局需要完全流畅，MJT 的方法是最好的。它需要额外的标记，但是是防弹的。

于 2012-06-14T18:25:28.803 回答
1

您可以查看 Matthew James Taylor 的解决方案：http: //matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

于 2012-06-14T18:13:48.933 回答
0

实现这一点的最简单方法就是使用带有边框的单元格的表格，但如果您手头有很多时间，@nebulousGirl 建议的 CSS 方法就是最好的方法。

于 2012-06-14T18:17:41.500 回答