CSS Centre Réactif DIV
Les "tuiles" (cases blanches) que vous voyez dans l'image 1 sont sensibles à l'écran utilisateurs. Si la taille de l'écran n'est tout simplement pas assez grand, il laisse un vide sur le côté droit. Ce que je veux faire est d'obtenir le résultat comme on le voit dans l'image 2. Voici mon code pour la mesure de ces éléments..
HTML:
<div class="main">
<div class="inner">
<div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div>
</div>
</div>
CSS:
.main{
width:100%;
background: #000;
}
.main .inner{
margin:10px;
min-width: 140px;
background: red;
}
.main .inner .tile{
margin:10px;
height: 120px;
width: 120px;
background: #fff;
display: inline-block;
}
IMAGE 1:
IMAGE 2:
Une seule grille de mise en page n'est pas en mesure de soutenir ce à l'heure actuelle. Pour une explication de pourquoi pas, voir cette réponse. Mais de multiples disposition des grilles de différentes tailles peuvent le prendre en charge, en utilisant les media queries pour choisir le droit basé sur la taille de l'écran, comme @axrwkr suggéré.
OriginalL'auteur Harry | 2013-04-06
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire avec les media queries pour définir la largeur de la
.inner
classe à différents navigateur largeurs, puis définissez lamargin-left
etmargin-right
propriétés àauto
au centre. Définir lapadding-top
etpadding-bottom
propriétés de la.main
classe au lieu de définir des marges supérieure et inférieure sur la.inner
classe. Utilisez une combinaison depadding
sur le.inner
classe etborder
sur le.tile
classe à l'espace, les tuiles de manière égale de10px
à part.Pour une description détaillée des requêtes de média: CSS media queries
exemple
css
Définir une requête de média pour chaque largeur du navigateur, dans cet exemple, j'ai seulement allé jusqu'à 800px, mais vous pouvez en ajouter autant plus que vous avez besoin.
css (suite)
Les media queries sont utilisés pour définir la largeur de
.inner
à un multiple de130px
qui est de la largeur d'une.tile
avec une bordure de10px
.Si vous souhaitez modifier l'espacement entre les tuiles que vous auriez besoin de modifier le
border
sur le.tile
classe, lepadding
sur le.inner
classe, lemargin-top
etmargin-bottom
sur le.main
classe et lawidth
qui est spécifié dans chacune des requêtes de média.Merci beaucoup!
OriginalL'auteur
Vous pourriez max-width pour
.inner
alorstext-align: center
pour.main
OriginalL'auteur Willy Wonka
Ajouter text-align:center propriété css http://jsfiddle.net/dolours/afKgg/
OriginalL'auteur Dolo