在固定的div容器的高度的HTML jQuery中的麻煩

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