Question

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

Answer 1

嗯，你可以这样做。

<强> 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;
}

DEMO HERE

Answer 2

这是基于总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;
}

在修复div容器高度的html jquery中遇到麻烦

2 个答案: