2つのimgを次のテキストの隣に配置する方法

Question

私はPSDファイルから2番目のテスト用HTMLファイルを作成しています。 下の画像に表示されますmy issue お互いに隣り合った2枚の画像を並べて表示する方法を教えてください。 また、私はそれが敏感であることを望みます。 たとえば、大きな画面では、2つの画像が隣り合わせに表示されます。小さな画面では、それぞれ別々の行に画像が表示されます。 おかげでたくさん

Answer 1

は、まずこのようなボックス内の画像やテキストを持っている：

<div class="contentBox"> 
    <img> 
    <h3>some title</h3> 
    <p>some text</p> 
</div> 

は、これらのボックスを浮かんでいます。

.contentBox{ 
    float:left; 
} 

私はあなたがそれを使用することができる方法をお見せするために迅速なスニペットを作っ：

#boxes{ 
 
text-align:center; 
 
} 
 
.contentBox { 
 
    display: inline-block; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    margin: 20px; 
 
} 
 

 
.contentBox img { 
 
    width: 100%; 
 
} 
 

 
.contentBox h3 { 
 
    margin: 5px; 
 
} 
 

 
.contentBox p { 
 
    text-align: justify; 
 
    margin: 5px; 
 
}

<div id="boxes"> 
 
    <div class="contentBox"> 
 
    <img src="http://via.placeholder.com/350x250"> 
 
    <h3>some title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p> 
 
    </div> 
 
    <div class="contentBox"> 
 
    <img src="http://via.placeholder.com/350x250"> 
 
    <h3>some title</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis mauris sem, in elementum tortor eleifend vel.</p> 
 
    </div> 
 
</div>