Dernière ligne alignée à gauche dans une grille d'éléments centrée à l'aide de Display Inline-Block
L'objectif est de créer une grille de blocs centrée tout en en vous assurant que la dernière rangée est alignée à gauche. Sans recourir à Flexbox ni ajouter de div de remplissage supplémentaires, voici une solution CSS uniquement :
Grille adaptative utilisant Display Inline-Block
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">margin:0; padding:0;
}
font-size:0; margin:0 auto; width:1000px;
}
.block {
font-size:20px; width: 150px; height: 150px; margin:25px; background: gold; display:inline-block;
}
@media screen et (max-width : 430px) {
#container{
width:200px;
}}
@media screen et (min-width : 431px) et (max-width : 630px) {
#container{
width:400px; }
>
@media screen et (largeur min : 631px) et (largeur maximale : 830 px) {
#container{
width:600px; }
}
@media screen et (largeur minimale : 831 px) et (largeur maximale : 1030 px) {
#conteneur{
width:800px; }
}
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
Cette solution crée une grille flexible qui adapte sa largeur en fonction de la taille du navigateur. Cela garantit également que la dernière ligne s'aligne à gauche, quel que soit le nombre de colonnes affichées.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
