0

我有 3div秒。div如果其他高度调整，我怎样才能使它们相等。我希望我所有的divs 都调整它的高度，即使它们的内容更少。就像在图像中一样，即使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;
}

截屏

4

4 回答 4

2

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>
于 2013-02-15T09:27:49.283 回答
1

第一部分看起来像来自https://stackoverflow.com/a/10235116/1902425的副本

到你的第二部分：如果你用 js 做，你的高度是动态计算的，所以你可以发布你的“阅读更多”链接 wirposition: 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;
}
于 2013-02-15T12:28:29.467 回答
0

设置高度.column-small div。

于 2013-02-15T09:07:53.117 回答
0 
.column-small{
    height: inherit !important;
}
于 2013-02-15T09:12:53.567 回答