div集高度相等

Question

我有3 div s。如果其他div高度调整，我如何使他们平等。我希望我所有的div都能调整它的高度，即使它们的内容较少。就像在图像中一样，即使没有数据的div也必须与其他图像相同，并在底部设置读取更多。

HTML：

<div class="column-wrapper"> 
    <div class="column-small border border-top"> 
     <h3>Features</h3> 

     <ul> 
     <li>Code blocking</li> 
     <li>Code Wrapping</li> 
     <li>Code Killing</li> 
     <li>Code Sleeping</li> 
     </ul> 

     <span><a href="#">Read more</a></span> 
    </div> 

    <div class="column-small border border-top"> 
     <h3>Modules</h3> 

     <ul> 
     <li>Barking Around The house</li> 
     <li>Loving the Cats</li> 
     <li>Floating The points</li> 
     <li>Coding The Sleepers</li> 
     </ul> 

     <span><a href="#">Read more</a></span> 
    </div> 

    <div class="column-small border border-top"> 
     <h3>Idont knows</h3> 
     <span><a href="#">Read more</a></span> 
    </div> 
</div> 

CSS：

.column-wrapper { 
    padding-top: 20px; 
    text-align: center; 
    vertical-align: middle; 
    width: 100%; 
} 

.column-wrapper div { 
    display: inline-table; 
    margin: 2px; 
} 

.column-small { 
    padding: 10px; 
    width: 30%; 
    min-width: 250px; 
    height: auto; 
} 

.column-small span { 
    float: right; 
} 

.column-small ul { 
    margin-top: -10px; 
    width: 100%; 
    max-width: 240px; 
} 

.column-small ul li { 
    text-align: left; 
} 

.column-small li { 
    list-style: none; 
    padding: 5px; 
    text-indent: -30px; 
    word-wrap: break-word; 
} 

Answer 1

第一部分看起来像一个重复的从https://stackoverflow.com/a/10235116/1902425

你的第二个部分：如果你用JS做，你的身高是动态计算的，所以你可以现在的位置是你的“更多”链接世界投资报告position: absolute小例子：

<div class="column-small"> 
     <div class="column-content"> 
      <h3>Idont knows</h3> 
      <p>Your content</p> 
     </div> 
     <div class="readmore"><a href="#">Read more</a></div> 
</div> 

CSS：

.column-small { 
    position: relative; 
    height: 240px; 
} 
.readmore { 
    position: absolute; 
    bottom: 10px; 
    right: 10px; 
} 

Answer 2

设置高度.column-small div。

Answer 3

.column-small{ 
    height: inherit !important; 
} 

Answer 4

CSS：

.column-wrapper { overflow: hidden; } 

.column-small { 
    float: left; 
    margin: 20px; 
    background-color: red; 
    padding-bottom: 1000px; 
    margin-bottom: -1000px; 
} 

.column-small span { float: right; } 

.column-small ul { 
    margin-top: -10px; 
    width: 100%; 
    max-width: 240px; 
} 

.column-small ul li { text-align: left; } 

.column-small li { 
    list-style: none; 
    padding: 5px; 
    text-indent: -30px; 
    word-wrap: break-word; 
} 

HTML：

<div class="column-wrapper"> 
    <div class="column-small border border-top"> 
     <h3>Features</h3> 

     <ul> 
     <li>Code blocking</li> 
     <li>Code Wrapping</li> 
     <li>Code Killing</li> 
     <li>Code Sleeping</li> 
     </ul> 

     <span><a href="#">Read more</a></span> 
    </div> 

    <div class="column-small border border-top"> 
     <h3>Modules</h3> 

     <ul> 
     <li>Barking Around The house</li> 
     <li>Loving the Cats</li> 
     <li>Floating The points</li> 
     <li>Coding The Sleepers</li> 
     </ul> 

     <span><a href="#">Read more</a></span> 
    </div> 

    <div class="column-small border border-top"> 
     <h3>Idont knows</h3> 
     <span><a href="#">Read more</a></span> 
    </div> 
</div>