CSS-等高列？

Question

CSS-等高列？

在CSS中，我可以这样做：

但我不知道如何把它变成这样的东西：

---

CSS有可能做到这一点吗？

如果是，我如何才能不显式地指定高度(让内容增长)？

Answer 1

是。以下是本文使用的完整CSS。这很值得阅读整篇文章，随着作者一步地深入到你所需要的工作中。#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;}这不是唯一的方法，但这可能是我遇到过的最优雅的方法。还有一个网站完全是这样做的，查看源代码将允许您了解他们是如何做到的。.

Answer 2

给overflow: hidden到容器和大容器(并且相等)负边缘和正填充纵队。请注意，这个方法有一些问题，例如锚链接不能在您的布局中工作。标记<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="column"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="column"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="column"></div></div>CSS.container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}.column&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:&nbsp;-10000px; &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;10000px;}结果

Answer 3

您可以使用CSS表，如下所示：<style&nbsp;type='text/css"> &nbsp;&nbsp;&nbsp;&nbsp;.container&nbsp;{&nbsp;display:&nbsp;table;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.container&nbsp;.row&nbsp;{&nbsp;display:&nbsp;table-row;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;.container&nbsp;.row&nbsp;.panel&nbsp;{&nbsp;display:&nbsp;table-cell;&nbsp;}</style><div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="panel">...text...</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="panel">...text...</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="panel">...text...</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>