三列响应等高，带边框。如何使它在CSS？

如何制作具有相同高度的多列，并在每个部分之间具有边界并保持其响应...（请参阅下图）。我知道你可以使用背景图片，如果你有两列列，但当更多，整个响应部分去。三列响应等高，带边框。如何使它在CSS？

编辑：继承人的jsfiddle我做：http://jsfiddle.net/kF9LA/

mockup of the desired layout

来源

2012-06-14 Sebastian Graz

一般来说，您应该首先尝试几件事，并在提出问题之前展示您所做的事情，而不是要求社区从头开始为您构建布局...... –

好的，我将举个例子，已经在几秒内出现 –

http://jsfiddle.net/kF9LA/ –

对于两个bg图像，一个边界是从左边界的1/3，还有一个是右边界的1/3？然后分别在background-position:33.3% 0;和background-position:66.6% 0;的容器对中应用它们。

使用一个单一的形象在中间边框相似，background-position:50% 0;

编辑：

运行quick test这似乎工作，它的流体/响应后。

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;并增加了一些文字内容到demo，展现了高度成长基于内容。用一个2x1图像替换两个bg图像。

来源

2012-06-14 18:31:31

羞耻我需要的高度是动态的内容，否则这个解决方案将是最好的！ –

它应该动态工作。我硬编码'高度：200px'，因为我的示例中没有任何内容。但是，如果你删除它并添加一些内容（以及内容的一些内部列），它应该动态地工作。我创建的bg图像的高度恰好是200px，但也可以是1px，因为它们是平铺的。 –

此外，刚刚意识到相同的图像可以用于两个BG容器。如果不是IE8及更早版本，您可以在一个'background'属性中指定多个bg图像，并使用一个bg容器而不是两个。 –

你可以看看从马修詹姆斯·泰勒的解决方案： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

来源

2012-06-14 18:13:48 nebulousGirl

是的，我已经看到它，整洁的解决方案。然而他的例子不允许我像图片中显示的那样拥有边框 –

看起来这可以在响应设计中工作（因为它不使用任何px值）。但它是否适合显示边界（具有一致的厚度）而不是填充bg？ –

您可以将边框添加到背景的右侧。不是最优雅的解决方案，但在某些情况下它工作得很好。 – nebulousGirl

实现这一目标的最简单的方法是只是为了使用带有边框的单元格的表格，但如果您手上有很多时间，则@nebulousGirl建议的CSS方法就是这样。

来源

2012-06-14 18:17:41 Tom

我在类似的线程here有几个答案。这样做的最好方法完全取决于你是否需要用户以的视觉看到divs是相同的高度。如果您的最终网站看起来像这个模型（唯一的视觉线索是边界），您不一定需要使用MJT的方法，而是可以使用背景图像，如this。

如上面链接的注释中所述，此方法不适用于水平流体布局，但如果您有固定宽度布局，则可以使用背景图像作为任意数量的列。只要确保你的数学是正确的:)然而，如果你的布局需要完全流畅，MJT的方法是最好的。它需要额外的加价，但是是防弹的。

来源

2012-06-14 18:25:28

感谢您的回答，但重要的是内容是响应/流体。 –

ACK！我还无法评论其他答案。 @sebasiongraz，它绝对允许你做边框！只需设置栏的边框就可以了。你甚至可以通过设置背景颜色并在列上设置1px的边距以便背景显示，从而使它看起来像边框，当它实际上只是一个背景“遮罩”时，可以这样做 –

单击链接，哟！ [这是再次]（http://stackoverflow.com/a/10905779/1284654），这里是你的小提琴http://jsfiddle.net/6yZxw/ –

三列响应等高，带边框。如何使它在CSS？

回答

相关问题