Как выравнивать изображения по разным divs по горизонтали

Question

Не могли бы вы помочь мне понять, как выравнивать изображения по горизонтали через разные div в одной строке независимо от внутреннего содержимого div? Я пробовал абсолютное позиционирование, но мне нужно, чтобы этот тестовый тест содержал все внутри внутреннего контейнера div.

Пример:

<div class="row"> 
    <div class="col-md-3 product-box"> 
    <div class="col-md-12 background-contain"> 
     <p class="blue-title">Product Title 1</p> 
     Staring at $500 
     <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     <br> 
     <div class="img-contain"> 
     <img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" /> 
     </div> 
     <a class="bottom-link">Learn More</a> 
    </div> 
    </div> 
    <div class="col-md-3 product-box"> 
    <div class="col-md-12 background-contain"> 
     <p class="blue-title">Product Title 2</p> 
     Staring at 1900 
     <br> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus.</br> 
     <img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" /> 
     <a class="bottom-link">Learn More</a> 
    </div> 
    </div> 
    <div class="col-md-3 product-box"> 
    <div class="col-md-12 background-contain"> 
     <p class="blue-title">Product Title 3</p> 
     Staring at 1900 
     <br> Cras non metus sed odio tristique imperdiet.</br> 
     <img src="materials/images/machine_b.jpg" class="img-responsive" alt="cereal" /> 
     <a class="bottom-link">Learn More</a> 
    </div> 
    </div> 
    <div class="col-md-3 product-box"> 
    <div class="col-md-12 background-contain"> 
     <p class="blue-title">Product Title 4</p> 
     Staring at 1900 
     <br> Pellentesque mattis tellus ut molestie dapibus.</br> 
     <img src="materials/images/candy_b.jpg" class="img-responsive" alt="cereal" /> 
     <a class="bottom-link">Learn More</a> 
    </div> 
    </div> 
</div> 
</div> 

Answer 1

Попробуйте использовать Bootstrap класс - "контейнер-жидкость". Вот jsfiddle: https://jsfiddle.net/z5v6t048/

<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="col-sm-6 product-box"> 
 
     <div class="col-md-12 background-contain"> 
 
     <p class="blue-title">Product Title 1</p> 
 
     Staring at $500 
 
     <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     <br> 
 
     <div class="img-contain"> 
 
     <img src="materials/images/cereal_b.jpg" class="img-responsive" alt="cereal" /> 
 
     </div> 
 
     <a class="bottom-link">Learn More</a> 
 
    </div> 
 
    </div> 
 
    <div class="col-sm-6 product-box"> 
 
     <div class="col-md-12 background-contain"> 
 
     <p class="blue-title">Product Title 2</p> 
 
     Staring at 1900 
 
     <br/> Donec ornare magna sit amet erat molestie sollicitudin ac vitae lectus. 
 
     <img src="materials/images/flower_b.jpg" class="img-responsive" alt="cereal" /> 
 
     <a class="bottom-link">Learn More</a> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

.col-md-3{ 
 
\t width: 24%; 
 
\t float: left; 
 
\t margin-left: 10px; 
 
} 
 

 
.row{ 
 
margin: 0 auto; 
 
    max-width: 1280px; 
 
    width: 90%; 
 

 
}