2016-09-07 14 views
0

divの内部コンテンツに関係なく、同じ行の異なるdiv間でイメージを水平に整列させる方法を理解できますか? 私は絶対的なポジショニングを試みましたが、このインタビューテストではすべてを内部divコンテナ内に保持する必要があります。異なるdiv間でイメージを水平に整列する方法

例: - "コンテナ流体"
here

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

あなたのCSSを含めるとかなりのスクリーンショットへのリンクよりスニペットを作成してください。 – Shaggy

+0

'.col-md-12.background-contains img {position:absolute;}を試したことがありますか?下:x em;左:50%;トランスフォーム:translateX(-50%); } '? – Jibeee

+0

見た目は私に揃っていますhttps://jsfiddle.net/kvb5hb6f/15/ –

答えて

0

は、ブートストラップクラスを使用してみてください。ここ は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>

0

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

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

 
}