如何让你的div完全达到目标? 如何填写父div的垂直空间? 如何在不使用背景图像的情况下获得相等长度的列?
我花了几天时间用谷歌搜索和解析代码,以了解如何尽可能简单有效地完成等长列。这是我提出的答案,我想在一个小教程中与社区复制和粘贴样式分享这些知识。
对于那些认为这是重复的人来说,事实并非如此。我受到了几个网站的启发,其中包括http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks,但下面的代码是独一无二的。
答案 0 :(得分:25)
对于更简单的解决方案,您可以向父display: table
及其子display: table-cell
提供,如下所示:
.parent {
display: table;
}
.child {
display: table-cell;
}
请参阅DEMO。
请注意,这在IE7中不起作用,因此如果需要IE7支持,则需要更复杂的解决方案。
答案 1 :(得分:7)
现代网页设计中一个棘手的问题是创建一个两个(或更多)列布局,其中所有列的高度相同。我开始寻求在纯CSS中找到一种方法。
您最简单的方法是在wrap-div中使用背景图片来保存您的两列(或页面背景)。
您也可以使用CSS表格单元格来完成此操作,但不幸的是,浏览器对此的支持仍然是阴暗的,因此它不是首选解决方案。继续阅读,有更好的方法。
我从网页的两个页面找到了我的灵感,虽然我更喜欢我的解决方案,因为它让我更自由地使用圆角和精确的宽度或百分比布局,并且更容易编辑,你的最终布局持有div是不要强迫你做负数运算。
==诀窍:==
首先创建背景设计cols,然后放置一个可容纳常规内容的全宽div。诀窍在于列中的浮动列,当内容延伸时,无论最终列的长度是什么,都会在所有父列上创建推送效果。
在这个例子中,我将使用带有圆角的居中wrap-div中的2列网格。我试图保持松散,以便轻松复制粘贴。
==第1步==
创建基本网页。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
</body>
</html>
==第2步==
在另一个浮动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>
==第4步==
添加您的内容。在这个例子中,我放置了两个位于布局上方的div。我也带走了虚线边框。 Presto,就是这样。如果您愿意,可以使用此代码。
<!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>
==灵感来源==