div设置高度相等

2024-03-31

我有 3 个divs。如果另一个我怎样才能使它们相等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;
}

CSS:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

div设置高度相等 的相关文章