我试图这样做,我在一个使用 div 的容器中有 3 列,我们可以说每列 33%。我想要做的是使每 3 列的高度相同,等于具有最大高度的列的高度,而不固定高度(也就是说,我们知道 div 元素会根据其中的内容自动获取高度,所以如果我们有 3 个不同高度的列,因为其中的内容不同,那么我怎么能做到与具有最大高度的列相同的高度)但无法做到。所以请告诉我我该怎么做?
问问题
50 次
2 回答
0
这是完全基于css的东西,希望对您有所帮助
html
<ul class="list-wrapper">
<li class="list-item">asd</li>
<li class="list-item">asd</li>
<li class="list-item">asdasdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd
</li>
<li class="list-item">asd</li>
<li class="list-item">asd</li>
<li class="list-item">asdasdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd <br />asdas <br />asdasd <br />asdasd <br />asdasd
</li>
</ul>
CSS
.list-wrapper {
border-left:1px solid #DADADA;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
overflow: hidden;
position: relative;
padding: 0;
width: 450px;
}
.list-wrapper:after, .list-wrapper:before {
background: none repeat scroll 0 0 #DADADA;
content: "";
height: 100%;
left: 33.3%;
position: absolute;
top: 0;
width: 1px;
}
.list-wrapper:after {
left: 66.7%;
}
.list-item {
border-top: 1px solid rgb(218, 218, 218);
display: list-item;
float: left;
list-style-type: none;
overflow: hidden;
padding:10px 0;
text-align: center;
width: 33.3%;
}
.list-wrapper:nth-child(3n+1){
clear: left;
}
于 2013-10-15T11:10:30.660 回答
0
那么你可以这样做。
HTML:
<div class="con">
<div class="col">asd</div>
<div class="col">asdasdasd
<br />asdas
<br />asdasd
<br />asdasd
<br />asdasd</div>
<div class="col">asd</div>
</div>
CSS
.con {
height: 100%;
width: 400px;
display: table;
table-layout: fixed;
}
.col {
display: table-cell;
border: #000000 solid 1px;
}
于 2013-10-15T10:08:21.387 回答