Je travaille sur une page d'accueil que j'ai développée récemment et j'ai quelques difficultés à aligner mes éléments dans la flexbox. La première flexbox doit contenir trois (3) images et toutes les images doivent être sur une ligne verticale les unes en dessous des autres.
C'est également important pour ma deuxième flexbox.
Voici mon code :
.flexcontainer-1 {
display: flex;
justify-content: flex-start;
align-items: left;
height: auto;
width: auto;
}
.flexcontainer-2 {
display: flex;
justify-content: flex-end;
align-items: right;
height: auto;
width: auto;
}
<div class="flexcontainer-1">
<!-- Übersicht über alle Immobilien mit entsprechenden Bildern -->
<h4>Unsere Immobilien</h4>
<!-- Weiterleitung über Anchor innerhalb des Images zu Einzelbeschreibung, -->
<!-- Übergabe der ID aus Datenbank in den Anchor -->
<p>
<a href="db_immobilien_desc_b.php?id=2">
<img src="../images/haus2.jpg" alt="Beschreibung Haus2"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=3">
<img src="../images/haus3.jpg" alt="Beschreibung Haus3"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=4">
<img src="../images/haus4.jpg" alt="Beschreibung Haus4"></a>
</p>
</div>
<div class="flexcontainer-2">
<p>
<a href="db_immobilien_desc_b.php?id=5">
<img src="../images/haus5.jpg" alt="Beschreibung Haus5"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=6">
<img src="../images/haus6.jpg" alt="Beschreibung Haus6"></a>
</p>
<p>
<a href="db_immobilien_desc_b.php?id=7">
<img src="../images/haus7.jpg" alt="Beschreibung Haus6"></a>
</p>
</div>
Cela crée toujours un trou dans le deuxième alignement de l'image, malheureusement je n'ai pas trouvé de solution à ce problème.
J'apprécierais vraiment tous les conseils ou suggestions sur la manière d'améliorer mon codage.
Merci beaucoup d'avance.
Cordialement,
Luc
J'ai essayé d'utiliser des attributs justifiy-content 和 align-items mais cela ne fonctionne pas pour moi.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il existe plusieurs façons d'implémenter cette mise en page, la grille CSS, Flexbox et les mises en page multi-colonnes fonctionnent toutes (de différentes manières).
La première chose que je recommande est de modifier le HTML. Sémantiquement, vous semblez afficher une liste de propriétés, ce qui suggère immédiatement qu'une liste doit être utilisée (ordonnée ou non) ; je suggérerais qu'il devrait y avoir du texte et des images descriptifs, ce qui à son tour suggère cet élément
<figure>.Avec cette révision, une fois enveloppé dans
<main>标记（或<section>、<article>...), le HTML ci-dessus pourrait devenir quelque chose comme ceci :Utilisez-le avec une mise en page multi-colonnes et ajoutez des commentaires explicatifs en CSS :
Démo JS Fiddle.
Cela peut également être fait en utilisant une grille CSS, bien que les nombres avec la grille s'écoulent de gauche à droite puis de haut en bas :
Démo JS Fiddle.
Utilisez également une mise en page flexible :
Démo JS Fiddle.
Référence :
box-sizing.break-inside.clamp().column-count.display.flex-basis.flex-direction.flex-grow.flex-flow.flex-wrap.gap.grid-template-columns.inline-size.list-style-type.margin-block.margin-inline.repeat().text-align.var().Vous semblez utiliser
h4dans le premier conteneur.Obtenez cet élément de
flexcontainer-1.Pour obtenir les résultats souhaités, vous devriez faire ceci
.container { display: flex; gap:10px; } .item { height: 50px; width: 100px; background-color: blue } .box { display: flex; flex-direction: column; gap: 10px }