как убедиться в том, что этот макет сетки строки автоматически регулирует высоту в соответствии с содержанием

Question

*{ 
 
    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; 
 
}

<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>

Я создал макет сетки. Когда содержимое одного элемента больше, высота строки не корректируется соответствующим образом. Как я могу это сделать?

Примечание: Я не хочу использовать javascript для этого. Я уверен, что это возможно с помощью CSS

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

Answer 1

Wrap каждые три изображения с контейнером. Таким образом, вы будете иметь их все стек правильно рядом друг с другом, как вы можете видеть на этом изображении:

Также убедитесь, чтобы очистить коллапсирующее на каждом из контейнеров вы будете добавлять, а также, как они сбрасываются из-за плавающих изображений. Обычно я использую для этого overflow: auto, но отметьте this SO сообщение для получения дополнительных способов сделать это.