Placer deux images côte à côte

Question

J'essaie de placer deux images côte à côte. Je veux qu'ils soient pleine largeur et réactifs. Cependant, je ne peux pas comprendre comment les obtenir sur la même ligne. Est-ce que quelqu'un a des solutions? Voici un violon - https://jsfiddle.net/0je558ex/

<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

Définissez les divs qui enveloppent l'image pour width: 50%; display: inline-block; et définir les img balises à width: 100%; ils prendront la div entier, puis supprimez l'espace entre les éléments div inline-block dans votre code HTML depuis des espaces sur inline les éléments prennent de l'espace et l'espace dépassera 100% de largeur (puisque chaque div prend 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

Vous avez deux problèmes en fait. Tout d'abord, vous définissez le style du img, mais le div qui les enveloppe est implicitement appelé pour être: display:block;width:100%;.

Retirez simplement le div s. Deuxièmement, et un peu plus intéressant, vos éléments img ne s'afficheront toujours pas l'un à côté de l'autre à 50% car tout espace entre deux éléments display:inline-block signifie que la taille totale est supérieure à 100%, le second élément est donc renvoyé à la deuxième ligne.

Vous devez donc mettre les img étiquettes sur la même ligne -frustrant, je sais.

Voir cette question: 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; 
 
}