logo标签列表

如何使用纯CSS创建等高列

csscss-floathtmlmultiple-columns
13

如何使您的 div 达到底部？ 如何填满父 div 的垂直空间？ 如何在不使用背景图像的情况下获得等长列？

我花了几天时间搜索并剖析代码，以尽可能简单高效地实现等长度列。这是我想出来的答案，我想用复制粘贴方式在小教程中与社区分享这些知识。

对于那些认为这是重复的人，它不是。我受到了多个网站的启发，其中包括 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 但下面的代码是独特的。

Quentin，这不是重复内容。我的代码受到了http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks等网站的启发，但我对其进行了进一步的简化和修改，尽管我不记得具体的区别是什么了，因为我写它已经有很长时间了。 - Paul
使用这个网站解决这样的问题：http://callmenick.com/post/css-equal-height-columns-three-different-ways - Suraj Mevada
2个回答
25

如果你想要一个更简单的解决方案，你可以将父元素的 display 属性设置为 table，并将其子元素的 display 属性设置为 table-cell，像这样：

.parent {
  display: table;
}
.child {
  display: table-cell;
}

请查看演示。

请注意，此方法不适用于IE7，如果需要支持IE7，则需要一个更精细的解决方案。

正如我在最初的回答中所说：“您也可以使用CSS表格单元格来实现，但不幸的是，浏览器对此的支持仍然不稳定，因此这不是首选解决方案。”但是感谢您的补充，让我意识到IE7已经不再被很多人使用了，我刚刚在Statcounter - http://gs.statcounter.com上查看了统计数据。 迄今为止，由于它是Web开发的悲哀之子，仍然存活着，我一直在检查我所做的一切是否在IE7中运行。 - Paul
另外，你的表格单元示例显示了一个固定高度。大多数情况下，你不知道它的高度是多少，或者不想设置高度，只想设置宽度。因此，代码应该略有不同。就像这个例子。 - Paul
不错的想法。如果你不需要固定高度，可以直接移除父元素的高度属性。这样每个子元素的高度都将设置为最高的子元素高度。 - zxqx
也许你可以稍微编辑一下你的答案，以帮助下一个看到这个问题的人。 - Paul
7
现代网页设计的一个棘手问题是创建一个所有列高度相等的两列（或更多）布局。我开始了一项任务，寻找一种在纯CSS中实现此目的的方法。
您可以通过在容纳两列（或页面背景）的包装div中使用背景图像来最轻松地实现此目的。
您也可以使用CSS表单元格来实现此操作，但不幸的是，对于此的浏览器支持仍然有些模糊，因此这不是首选解决方案。继续阅读，有更好的方式。
我从网络上的两个页面中得到灵感，尽管我更喜欢我的解决方案，因为它使我更自由地使用圆角和精确的宽度或百分比布局，并且更容易编辑，您的最终布局包含的div不会强制要求您进行负数计算。
== 技巧：==
首先创建背景设计列，然后放置可以容纳常规内容的全宽div。技巧就在于，当内容长度扩展时，在所有父列中创建漂浮列，无论哪个结束列最长，都可以产生推动效果。
在此示例中，我将在带有圆角的居中包装div中使用2列网格。我尝试保持简洁明了，以便轻松复制粘贴。
== 第1步==
创建基本网页。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>

== 第二步 ==

在一个浮动的div中创建另一个浮动的div。然后在内部div上应用负边距以使其在视觉上弹出框架。我添加了虚线边框以说明目的。请注意，如果您将外部div向左浮动并给内部div一个向左的负边距，则内部div将在不给您滚动条的情况下进入页面边缘以下。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        this content obviously only fits the left column for now.
    </div>
</div>
</body>
</html>

== 步骤 3 ==

在内部 div 中：创建一个没有背景的 div，它的宽度为所有列的宽度之和。它将推动超出内部 div 的边缘。我添加了虚线边框以说明目的。这将成为您内容的画布。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
    border: 3px dotted silver; /*temporary css*/
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
    border: 3px dotted gold; /*temporary css*/
}
#overbothsides{
    float:left;
    width:400px;
    border: 3px dotted black; /*temporary css*/
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            this content spans over both columns now.
        </div>
    </div>
</div>
</body>
</html>

== 第四步 ==

添加您的内容。在这个例子中，我放置了两个div，它们位于布局之上。我还去掉了虚线边框。就是这样简单。如果您喜欢，可以使用这段代码。

<!DOCTYPE HTML>
<html>
<head>
<style>
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="rightsideBG">
    <div id="leftsideBG">
        <div id="overbothsides">
            <div id="leftcol">left column content</div>
            <div id="rightcol">right column content</div>
        </div>
    </div>
</div>
</body>
</html>

== 步骤 5 ==

为了使它更美观，您可以将整个设计居中放置在一个包装 div 中，并给它圆角。除非您使用特殊的修复程序，否则旧版 IE 不会显示圆角。

<!DOCTYPE HTML>
<html>
<head>
<style>
#wrap{
    position:relative;
    width:500px;
    margin:20px auto;    
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    border-bottom-right-radius: 20px;
}
#rightsideBG{
    float:right;
    background:silver;
    width:300px;
}
#leftsideBG{
    float:left;
    background:gold;
    width:100px;
    margin-left:-100px;
}
#overbothsides{
    float:left;
    width:400px;
}
#leftcol{
    float:left;
    width:80px;
    padding: 10px;
}
#rightcol{
    float:left;
    width:280px;
    padding: 10px;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="rightsideBG">
        <div id="leftsideBG">
            <div id="overbothsides">
                <div id="leftcol">left column content</div>
                <div id="rightcol">right column content</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

== 灵感来源 ==

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接