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 class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div></div>

CSS

.container {
    overflow: hidden;}.column {
    float: left;    
    margin-bottom: -10000px;
    padding-bottom: 10000px;}

结果

Answer 3

您可以使用CSS表，如下所示：

<style type='text/css">
    .container { display: table; }
    .container .row { display: table-row; }
    .container .row .panel { display: table-cell; }</style><div class="container">
    <div class="row">
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
        <div class="panel">...text...</div>
    </div></div>