0

我试图这样做，我在一个使用 div 的容器中有 3 列，我们可以说每列 33%。我想要做的是使每 3 列的高度相同，等于具有最大高度的列的高度，而不固定高度（也就是说，我们知道 div 元素会根据其中的内容自动获取高度，所以如果我们有 3 个不同高度的列，因为其中的内容不同，那么我怎么能做到与具有最大高度的列相同的高度）但无法做到。所以请告诉我我该怎么做？

4

2 回答 2

0

这是完全基于css的东西，希望对您有所帮助

http://jsfiddle.net/SM8x3/7/

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 回答