2枚の画像を並べて並べます

Question

2枚の画像を並べて表示しようとしています。私はそれらをフル幅で反応性のあるものにしたい。しかし、私は同じ行にそれらを取得する方法を把握することはできません。誰にも解決策はありますか？ここではフィドルは - https://jsfiddle.net/0je558ex/ので、彼らが取り上げるwidth: 50%; display: inline-block;に画像をラップし、width: 100%;にimgタグを設定するdivを設定し

<div class="food-featured-posts"> 
 

 
    <div class="food-featured-posts-first"> 
 
    <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ > 
 
    </div> 
 

 

 
    <div class="food-featured-posts-second"> 
 
    <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ > 
 
    </div> 
 

 
</div>

food-featured-posts { 
 
    width: 100%; 
 
    margin-bottom: 100px; 
 
} 
 
.food-featured-posts-first img { 
 
    width: 50%; 
 
    height: 50%; 
 
    display:inline-block 
 
} 
 
.food-featured-posts-second img { 
 
    width: 50%; 
 
    height: 50%; 
 
    display:inline-block 
 
}

Answer 1

div内の空白があるため、HTML内のインラインブロックdiv要素の間のスペースを削除します要素がスペースを占め、スペースが100％幅を超えます（各divが50％を占めるため）。

img { 
 
    width: 100%; 
 
} 
 
.food-featured-posts > div { 
 
    width: 50%; 
 
    display: inline-block; 
 
}

<div class="food-featured-posts"> 
 
    <div class="food-featured-posts-first"> 
 
    <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ > 
 
    </div><div class="food-featured-posts-second"> 
 
    <img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ > 
 
    </div> 
 
</div>

Answer 2

あなたは実際には二つの問題を抱えています。

最初にimgのスタイリングを設定していますが、それらをラップするdivは暗黙のうちに基本的には：display:block;width:100%;になります。

divを削除するだけです。

2つのdisplay:inline-block要素の間の空白が100％を超えるため、2番目の要素がキックされるため、img要素は互いに隣接して50％でレンダリングされません2行目。

したがって、同じ行にimgタグを置く必要があります。 -frustrating、私は知っています。

この質問を参照してください：CSS two div width 50% in one line with line break in file

<div class="food-featured-posts"> 
 
    <!-- Note these are on the same line --> 
 
    <img src="https://static.pexels.com/photos/2855/landscape-mountains-nature-lake.jpg"/ ><img src="https://static.pexels.com/photos/4164/landscape-mountains-nature-mountain.jpeg"/ > 
 
</div>

food-featured-posts { 
 
    width: 100%; 
 
    margin-bottom: 100px; 
 
} 
 
.food-featured-posts img { 
 
    width: 50%; 
 
    display:inline-block; 
 
}