html - 页面上错误的 div block 布局

Question

我正在制作一个非常简单的页面，其中包含信息 block 列表，其中包含照片和描述。当描述长度增加时，div 的高度也会增加，item-block 的每一行紧挨着最高的 div。

是否有可能不间断地输出以下 block 行？要么低于前一个，要么刚好低于前一行中的最高 div。

这是我的 HTML 和 CSS 代码:

.item-container {
  max-width: 90%;
  display: table;
  border: 4px double #d9d9d9;
  border-radius: 5px;
  margin: auto;
}
.item-block {
  border: solid lightgray 1px;
  border-radius: 10px;
  width: 230px;
  float: left;
  padding: 5px;
  margin: 3px;
}
.item-image {
  padding-top: 2px;
  width: 220px;
  height: 220px;
}
.item-text {
  font-size: 14px;
  color: #666666;
  text-align: justify;
}

<div class="item-container">

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

</div>

Answer 1

准确地做到这一点的一种方法是使用脚本找到最高的 block ，然后将其高度提供给所有 block

检查这个 jsfiddle

添加的代码:

$(document).ready(function(){

var highest = 0;
    $('.item-block').each(function(){  
            if($(this).height() > highest){  
            highest = $(this).height();  
    }
});    
$('.item-block').height(highest);

});

或者如果你只想使用 css 添加 display:inline-block 而不是 float:left 并且添加 vertical-align:top 到 .item-block看这里 jsfiddle

但是这个解决方案会让 block 看起来有点乱，因为它们不会有相同的高度......这就是为什么第一个解决方案是 jq