如何确保该网格布局行根据内容自动调整高度

Question

＆＃13;

＆＃13;

*{
  box-sizing: border-box;
}

.results__item{
  float: left;
  width: calc(100%/3 - 40px/3)  
}

.results__item:nth-child(3n-1){
  margin-left: 20px;
  margin-right: 20px;
}

.results__item__img-wrapper{
  overflow: hidden;
}

.results__item__img-wrapper img{
  width: 100%;
  height: calc(100%/3 - 40px/3 + 90px)
}

.results__item__content{
  word-wrap: break-word;
}

＆＃13;

<div class="results">
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product1 Product1 Product1 Product1 Product1 Product1 Product1 Product1</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product2</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product2</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product2</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product2</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    <div class="results__item">
      <div class="results__item__img-wrapper">
        <img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">        
      </div>
      <div class="results__item__content-wrapper">
        <div class="title">Product2</div>
        <div class="price">$122.00</div>        
      </div>
    </div>
    
    
  </div>

＆＃13;

＆＃13;

＆＃13;

我创建了一个网格布局。当一个项目的内容更多时，行的高度不相应地调整。我怎么能做到这一点？

注意：我不想为此使用javascript。我确信，这可以用CSS

http://jsbin.com/kopatojiho/1/edit?html,css,output

Answer 1

用容器包裹每三张图像。通过这种方式，您可以将它们全部正确地堆叠在一起，如此图所示：

同时确保清除您添加的每个容器上的折叠，因为它们因浮动图像而折叠。我通常会使用overflow: auto，但请查看this SO帖子以了解更多方法。