CSS 3列液体布局动态相同高度列 [英] CSS 3 Column Liquid Layout Dynamic Same Height Column
问题描述
我想知道如何使液体（15％，70％，15％）3列CSS布局具有动态等高列，其中每列动态地匹配最长列的高度（换句话说：根据内容每个列，如果列1长于2和3，则列2和3应该自动地与列1相同的高度）有一种方法来完成这一点，我看了圣杯： http://alistapart.com/article/holygrail ，它说它不适用于等高列。我想知道我是否可以修改我的CSS代码来做到这一点。
CSS代码：
/ *由http://www.cssportal.com生成* /
/ * @ import url（/ robotics / css / reset.css）; * /
html，body {
background：url（background.jpg'）无重复中心中心固定;
-webkit-background-size：cover; / * For WebKit * /
-moz-background-size：cover; / * Mozilla * /
-o-background-size：cover; / * Opera * /
background-size：cover; / * Generic * /
font-family：Verdana，Arial，Helvetica，sans-serif;
/ * font-size：13px; * /
color：#FFFFFF;
text-align：center;
}
ul {
text-align：center;
margin-left：-40px;
}
ul li {
display：block;
font-size：10pt;
padding：0px 15px 0px 15px;
}
ul li a {
margin：0 auto;
}
ul li a：link {
color：#fff;
text-decoration：none;
}
ul li a：visited {
color：#fff;
text-decoration：none;
}
ul li a：hover {
color：#fff;
text-decoration：none;
}
ul li a：active {
color：#fff;
text-decoration：none;
}
p {
font-size：10pt;
padding：10px;
}
#wrapper {
width：100％;
min-width：768px;
/ * max-width：900px; * /
margin：0 auto;
}
#headerwrap {
width：100％;
float：left;
margin：0 auto;
}
#header {
height：100px;
/ * border-radius：10px; * /
/ * border：1px solid #FFFFFF; * /
margin：5px;
}
#header img {
width：70％;
height：100％;
float：left;
margin-left：15％;
}
#contentliquid {
float：left;
width：100％;
}
#contentwrap {
margin-left：15％;
margin-right：15％;
float：left;
width：70％;
}
#content {
border-radius：10px;
border：1px solid #FFFFFF;
margin：5px;
height：500px;
}
#leftcolumnwrap {
width：15％;
margin-left：-100％;
float：left;
}
#leftcolumn {
border-radius：10px;
border：1px solid #FFFFFF;
margin：5px; height：500px;
}
#rightcolumnwrap {
width：15％;
margin-left：-15％;
float：left;
}
#rightcolumn {
border-radius：10px;
border：1px solid #FFFFFF;
margin：5px; height：275px;
}
#footerwrap {
width：100％;
float：left;
margin：0 auto;
clear：both;
}
#footer {
height：100px;
border-radius：10px;
border：1px solid #FFFFFF;
margin：5px;
}
HTML页面：
< html>
< head>
< link rel =stylesheettype =text / csshref =page.css>
< title>示例< / title>
< / head>
< body>
< div id =wrapper>
< div id =headerwrap>
< div id =header>
< p>这是标题。< / p>
< / div>
< / div>
< div id =contentliquid>< div id =contentwrap>
< div id =content>
< p>这是中间列。请让我和其他人一样高！< / p>
< / div>
< / div>< / div>
< div id =leftcolumnwrap>
< div id =leftcolumn>
< p>这是左栏。请让我和其他人一样高！< / p>
< / div>
< / div>
< div id =rightcolumnwrap>
< div id =rightcolumn>
< p>这是右栏。请让我和其他人一样高！< / p>
< / div>
< / div>
< div id =footerwrap>
< div id =footer>
< p>这是脚注。< / p>
< / div>
< / div>
< / div>
有没有办法动态使所有列的高度相同？
使用 display：table-cell; （这需要父元素设置为 display：table; 他们的容器的高度和他们的容器（如果没有其他设置）总是有它的最大的孩子的高度。
检查这个小提琴为例： / p>
您的html可能需要一些重新格式化，我改变了一些东西在那个例子，所以看看。首先，中心列需要被放置
并且看看这里有关css表显示属性的解释：
http://ajaxian.com/archives/display-table p>
I am wondering how to make a liquid(15%,70%,15%) 3 column css layout have dynamic equal height columns where each column matches the height of the longest column dynamically(in other words: according to content in each column, if column 1 is longer than 2 and 3, then columns 2 and 3 should automatically be the same height as column 1) Is there a way to accomplish this, I have looked at the holy grail: http://alistapart.com/article/holygrail and it says that it does not work with equal height columns. I am wondering if I can modify my css code to do exactly that.
CSS Code:
/* Generated by http://www.cssportal.com */
/*@import url("/robotics/css/reset.css");*/
html,body {
background:url(background.jpg') no-repeat center center fixed;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 13px;*/
color:#FFFFFF;
text-align:center;
}
ul {
text-align:center;
margin-left: -40px;
}
ul li {
display:block;
font-size:10pt;
padding: 0px 15px 0px 15px;
}
ul li a{
margin: 0 auto;
}
ul li a:link {
color:#fff;
text-decoration:none;
}
ul li a:visited {
color:#fff;
text-decoration:none;
}
ul li a:hover{
color:#fff;
text-decoration:none;
}
ul li a:active{
color:#fff;
text-decoration:none;
}
p {
font-size: 10pt;
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 768px;
/*max-width: 900px;*/
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 100px;
/*border-radius: 10px;*/
/*border: 1px solid #FFFFFF;*/
margin: 5px;
}
#header img {
width: 70%;
height: 100%;
float:left;
margin-left:15%;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 15%;
margin-right: 15%;
float:left;
width:70%;
}
#content {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
height: 500px;
}
#leftcolumnwrap {
width: 15%;
margin-left:-100%;
float: left;
}
#leftcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 500px;
}
#rightcolumnwrap {
width: 15%;
margin-left: -15%;
float: left;
}
#rightcolumn {
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;height: 275px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 100px;
border-radius: 10px;
border: 1px solid #FFFFFF;
margin: 5px;
}
HTML Page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="page.css">
<title>Sample</title>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>This is the header.</p>
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<p>This is the center column. Please make me the same height as everyone else!</p>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<p>This is the left column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<p>This is the right column. Please make me the same height as everyone else!</p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>This is the footer.</p>
</div>
</div>
</div>
Is there a way to make all columns the same height dynamically?
You should try using display: table-cell; (this requires a parent element set to display: table; Table cell elements always share the height of their container, and their container (if it's not otherwise set) will always have the height of it's largest child.
Check out this fiddle for an example:
Your html may need a little bit of reformatting as well, I changed a few things in that example, so take a look. Primarily, the center column needs to be put in between the left and right columns in your html.
And take a look at this for an explanation of css table display properties:
http://ajaxian.com/archives/display-table
这篇关于CSS 3列液体布局动态相同高度列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
