Question

我正在制作一个非常简单的页面，其中包含一系列包含照片和说明的信息块。当描述长度增加时，div的高度也会增加，item-block的每一行都会在最高div旁边流动。

是否有可能不间断地输出以下块行？低于前一个或低于前一行中的最高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

准确执行此操作的一种方法是使用找到最高块的脚本，然后将height提供给所有块

检查此 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

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

Answer 2

对于那些在研究过程中遇到这个问题来解决自己问题的人来说，这是一个展示解决方案的代码：

http://codepen.io/anon/pen/gMgLpp

.item-block {
    border: solid lightgray 1px;
    border-radius: 10px;
    width: 230px;
  vertical-align:top;   /* Added */
    padding: 5px;
    margin: 3px;
  display:inline-block; /* Added */
}

错误的div阻止页面上的布局

2 个答案: