Je travaille sur un cours sur CSS de Udemy appelé "Sites Web réalistes réactifs avec HTML5 et CSS3"
Les images sont censées empiler sur, comme ceci: P>
<section class="section-meals">
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">
</figure>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">
</figure>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Indian Hamachaji with">
</figure>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Korean goolash with egg">
</figure>
</li>
</ul>
</section>
3 Réponses :
Essayez de changer la taille de vos photos. Je vois que votre code a une largeur de 100% pour certaines des photos. Si cela ne fonctionne pas, essayez d'utiliser du flotteur: haut; Au lieu de flotter: gauche;.
Essayez de supprimer vos balises UL et LI.
Aussi, au lieu d'utiliser la taquis de la figure, essayez d'utiliser les balises DIV.
.Meal-photo a une largeur de 100%, donc aucune image ne l'affiche si vous supprimez et remplacez-la avec l'affichage : inline-block; devrait fonctionner à cependant que votre autre problème est .Meals-showcase li largeur est de 25%. Supprimer que vos images s'affichent ensuite horizontalement.
Affichage: Bloc; Par défaut afin qu'ils s'empileront toujours sur l'autre, sauf indication contraire du CSS. Les balises de span sont Affichage: Inline; Par défaut de manière à ce qu'ils seraient une meilleure option, dans ce cas, vous permettant de gagner du temps en code.
Essayez avec tous les Figure CODE> TAG INTÉRES LI CODE> TAG Je pense que vous essayez de: <section class="section-meals">
<ul class="meals-showcase">
<li>
<figure class="meal-photo">
<img src="resources/img/1.jpg" alt="Korean bimimbap with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/2.jpg" alt="Chinese sholik with egg and vegetables">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/3.jpg" alt="Indian Hamachaji with">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="resources/img/4.jpg" alt="Korean goolash with egg">
</figure>
</li>
</ul>
</section>
Je ne mets qu'un Li pour cette question, mais il y a plus ...
Comme commenté précédemment, si un seul LI, faire flotter la figure flotter à la place: Codepen.io/gc-nomade / PEN / RWBBMNM , si chacun est enveloppé dans LI, cela devrait fonctionner. Si ce n'est pas le cas, il faut quelques autres CSS d'autre où écrasent vos règles. Le code que vous partagez ne semble pas reproduire votre problème, il n'est pas possible de vous aider à partir de ce que vous avez partagé. Vous savez que vous avez plus de LIS, d'accord, mais chacun avec quatre chiffres, ou une figure par LI. Vous devriez clarifier votre question