Centre d'aligner conteneur et à gauche aligner les éléments enfants

j'ai X nombre d'images (toutes de la même taille et la largeur), et je veux les afficher sur une page web. Mais je veux que la page affiche automatiquement le nombre maximum d'images sur une ligne (sans redimensionner les images) lorsque le navigateur est redimensionné, et de montrer les images à distance fixe.

de plus, les images doivent être regroupées au centre de la page et affichées l'une après l'autre.

p.ex. Lorsque le navigateur fenêtre n'est assez large pour afficher 3 images sur une ligne, ils doivent être présentés comme suit.

3 images par ligne groupées ensemble à distance fixe, au centre de la page, l'une après l'autre. enter image description here

et si le navigateur est plus large de sorte que 4 images peuvent être affichées sur une rangée, ils doivent être affichés comme ainsi.

4 images par ligne (sans redimensionner les images), groupés ensemble une distance fixe à l'écart, au centre de la page, l'un après l'autre. enter image description here

Jusqu'à présent j'ai écrit le code suivant:

HTML

<div class="outer-div">
    <div class="inner-div">
        <div class="image-div"><img src="images/1.png"></div>
        <div class="image-div"><img src="images/2.png"></div>
        <div class="image-div"><img src="images/3.png"></div>
        <div class="image-div"><img src="images/4.png"></div>
        <div class="image-div"><img src="images/5.png"></div>
    </div>
</div>

CSS

img {
    height: 200px;
    width: 200px;
    padding: 10px;
}

.image-div {
    display: inline;
}

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left;
    display: inline;
}

ainsi les images sont affichées en ligne avec un rembourrage 10px à l'intérieur d'une div (div interne) qui est alors centrée à l'intérieur l'extérieur-div. Et les images sont alignées sur le texte à gauche à l'intérieur de la div interne.

Mais le problème est qu'ils sont affichés comme suit:

enter image description here

et comme suit lorsque le navigateur est élargi enter image description here

est-ce que quelqu'un peut me montrer comment afficher les images comme la première série d'images?

c'est-à-dire le nombre Maximum d'images par ligne (sans redimensionner les images), l'une après l'autre, regroupées au centre de la page, distance fixe entre elles (emballées).

32
demandé sur Community 2015-10-18 02:37:49
la source

10 ответов

pour autant que je sache, il n'y a pas de moyen facile de réaliser la mise en page avec des CSS simples. L'approche suivante utilise les requêtes Médias pour définir la largeur des divs internes pour différentes tailles de viewport.

envisager D'utiliser Javascript si vous avez un assez grand nombre d'articles, préprocesseurs CSS pourrait être utile aussi.

voir code snippet et commentaires en ligne, aussi vérifier le jsfiddle exemple pour facile test.

body {
    margin: 10px 0;
}
.outer {
    text-align: center;
}
.inner {
    font-size: 0; /* fix for inline gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset font size */
    display: inline-block;
    margin: 5px; /* gutter */
}
.item img {
    vertical-align: top;
}
@media (max-width: 551px) { /* ((100+5+5)x5)+1 */
    .inner {
        width: 440px; /* (100+5+5)x4 */
    }
}
@media (max-width: 441px) {
    .inner {
        width: 330px;
    }
}
@media (max-width: 331px) {
    .inner {
        width: 220px;
    }
}
@media (max-width: 221px) {
    .inner {
        width: 110px;
    }
}
<div class="outer">
    <div class="inner">
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
        <div class="item"><img src="//dummyimage.com/100"></div>
    </div>
</div>
11
répondu Stickers 2015-10-30 21:43:46
la source

nombre Maximum d'images par ligne (sans redimensionner les images), l'une après l'autre, groupées au centre de la page, distance fixe entre elles (enveloppées).

C'était une très bonne question. Cela semble très simple au début, mais le résultat optimal est difficile à atteindre.

Je ne crois pas vraiment qu'il y ait un moyen d'atteindre le comportement attendu sans utiliser les requêtes des médias.

Cependant, en faisant usage de certaines requêtes médias et en connaissant exactement la largeur des images et le maximum possible nombre d'images par ligne nous pouvons résoudre le problème en utilisant display: inline-* propriétés basées.


display: inline-block

devrait prendre en charge les vieux navigateurs, car il est autour depuis CSS2 . Nous devons utiliser un petite astuce pour éviter le rendu indésirable espace vide entre les éléments.

le truc est de définir la propriété CSS font-size: 0 .


display: inline-flex

cette solution fait usage de la CSS flexbox et son une bonne option pour les browers modernes.


affichage: inline-table

pris en charge depuis CSS2 aussi et pas de trucs nécessaires pour le faire fonctionner.


affichage: inline

le résultat final n'est pas celui attendu par l'auteur, puisque les éléments de la deuxième rangée seront alignés au centre et non à gauche. La bonne partie de cette solution est qu'elle fonctionne sans connaissance préalable de la largeur de l'image et les media queries.


.wrapper {
  text-align: center;
}
.inline {
  font-size: 0;
  display: inline;
}
.inline-block {
  display: inline-block;
  font-size: 0;
  text-align: left;
}
.inline-flex {
  display: inline-flex;
  flex-wrap: wrap;
}
.inline-table {
  display: inline-table;
  text-align: left;
}
.item {
  margin: 10px;
}
@media (max-width: 240px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 120px;
  }
}
@media (min-width: 241px) and (max-width: 360px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 240px;
  }
}
@media (min-width: 361px) and (max-width: 480px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 360px;
  }
}
@media (min-width: 481px) and (max-width: 600px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 480px;
  }
}
@media (min-width: 601px) and (max-width: 720px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 600px;
  }
}
@media (min-width: 721px) and (max-width: 840px) {
  .inline-block,
  .inline-flex,
  .inline-table {
    width: 720px;
  }
}
<h1>display: inline-block</h1>

<div class="wrapper">

  <div class="inline-block">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-flex</h1>

<div class="wrapper">

  <div class="inline-flex">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline-table</h1>

<div class="wrapper">

  <div class="inline-table">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>

<h1>display: inline</h1>

<div class="wrapper">

  <div class="inline">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

    <img class="item" src="http://dummyimage.com/100">

  </div>

</div>
9
répondu Romulo 2015-10-28 05:49:43
la source

Voici une solution générique qui pourrait fonctionner pour vous et les autres.

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

CSS

ul {
    margin: 0 auto;              /* center container */
    width: 1000px;
    padding-left: 0;             /* remove list padding */
    list-style-type: none;
    font-size: 0;                /* remove inline-block white space;
                                    see https://stackoverflow.com/a/32801275/3597276 */
}

li {
    display: inline-block;
    font-size: 60px;             /* restore font size removed in container */
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 15px 25px;
    box-sizing: border-box;
    text-align: center;
    line-height: 150px;
}

@media screen and (max-width: 430px) { ul { width: 200px; } }
@media screen and (min-width: 431px) and (max-width: 630px) { ul { width: 400px; } }
@media screen and (min-width: 631px) and (max-width: 830px) { ul { width: 600px;  } }
@media screen and (min-width: 831px) and (max-width: 1030px) { ul { width: 800px; } }

DÉMO

Re: Flexbox : bien que flexbox soit un outil génial, ce n'est pas la meilleure solution pour ce problème particulier. J'explique mon raisonnement ici: comment centrer un conteneur flexible mais à gauche-aligner flex articles

6
répondu Michael_B 2017-05-23 13:30:08
la source

je pense, compte tenu de la multitude de possibilités CSS, qu'il s'agit d'une solution assez élégante et polyvalente avec un code minimal.

l'extrait ci-dessous contient tous les CSS nécessaires, et est livré avec de nombreux commentaires. Il est préférable de l'exécuter en mode "pleine page". Dans un premier temps, redimensionnez votre navigateur jusqu'à rcb 1 ' a 6 colonnes . Ensuite, commencez à faire défiler et redimensionner pour voir les différents effets.

d'abord coup d'oeil vous n'êtes peut-être pas au courant, mais ce code simple a beaucoup de potentiel comme galerie, filmstrip, scrollbox (à la fois verticale et horizontale), etc.

bien que peut-être pas une solution à 100% à la question, je suis assez satisfait du résultat!

s'il vous Plaît avoir un bon coup d'oeil et donner votre appréciée commentaire!

-Avenant- : cette solution a été testé pour fonctionner avec:

  • Android 5+: navigateur par défaut
  • Windows7-x32: Google Chrome (46+), Firefox( 41+), Firefox DE (43+)) et IE11+

mise à JOUR 11/20/15 , quelques modifications de code, voir les commentaires.

/* A few initial globals I always use */
html, body           { box-sizing: border-box; height: 100%; width: 100%; 
                       margin: 0; padding: 0; border: 0; cursor: default }
*, *:before, *:after { box-sizing: inherit }
body                 { max-width: 100%; margin: 0 auto }


/*******************************/
/*     The important code      */
/*******************************/
.rcb { /* [MANDATORY] Main Responsive Component Box container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    width: 100%;        /* Maximum width within parent element */
    height: auto;       /* Adjust height to child element needs */
    padding: 15px       /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */
}
.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within frame*/
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */
    flex: 1 1;          /* add auto or 0, or add some min required width (fiddle away!) */
    min-width:  165px;  /* best value is a multiple or division of 330px for all types of devices */
    max-width:  100%;   /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100%;   /* ditto */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis! */
    overflow: hidden;   /* Chop off outside content */
    margin: 8px         /* some space between the boxes */
}
.rcb-cmp-item img {
    display: block }    /*  -Add 11/20/15 - remove the gap below image elements 
                           (by default, IMG is an inline element and causes bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/* [OPTIONAL] Media Queries to keep box sizes within reasonable limits (corrected for 8px margin) */
@media all and (min-width:  721px)  { .rcb-cmp-item { max-width: calc(33% - 16px) } }
@media all and (min-width:  991px)  { .rcb-cmp-item { max-width: calc(25% - 16px) } }
@media all and (min-width: 1321px)  { .rcb-cmp-item { max-width: calc(20% - 16px) } }

/*******************************/
/* That's it, the rest is demo */
/*******************************/

/* which you can replace with your own */
body                    { font-family: Lato; background-color: rgba(96,125,139,1); /* bluegrey 500*/
                          color: rgba(255,255,255,.87); font-size: 1vmax; line-height: 1.3vmax; }
h3,        
.rcb-cmp-list h4        { text-align: center }

.rcb-cmp-item           { background-color: #ffc107;
                          color: rgba(0,0,0,.87)  /* amber 500 */;
                          padding: 4px; /* -update 11/20/15 - see add of ".rcb-cmp-item img" */
                          border-radius: 2px }
.rcb-cmp-item,
.rcb-cmp-item p img     { box-shadow: 0px 2px 2px  0px rgba(0, 0, 0, 0.14), 
                                      0px 3px 1px -2px rgba(0, 0, 0, 0.20),
                                      0px 1px 5px  0px rgba(0, 0, 0, 0.12) }

.rcb-cmp-item p img     { vertical-align: middle }
.rcb-cmp-item p         { font-weight: 400; letter-spacing: 0 }

.rcb-cmp-item iframe    { border: none }
<h3>rcb 1</h3>
    <div id="rcb-control-1" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">200x200 rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized rectangles</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100"></div></div>
        </div>
    </div>

    <h3>rcb 2</h3>
    <div id="rcb-control-2" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">300x150 oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
    
            <h4 class="rcb-cmp-item">odd sized  oblongs</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x50"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/500x250"></div></div>
        </div>
    </div>
    
    <h3>rcb 3</h3>
    <div id="rcb-control-3" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">portrait 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
    
            <h4 class="rcb-cmp-item">landscape 16:9</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
    
            <h4 class="rcb-cmp-item">mixed 16:9 - 9:16</h4>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/180x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x180"></div></div>
        </div>
    </div>
    
    <h3>rcb 4</h3>
    <div id="rcb-control-4" class="rcb">
        <div class="rcb-cmp-list">
            <h4 class="rcb-cmp-item">odd ones out</h4>
            <div class="rcb-cmp-item">empty rcb-cmp</div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">empty rcb-cmp-item-cnt</div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>While I used a few oddly shaped images in this demo, on average most images will have ratio 3:2, 4:3 or 16:9</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><iframe src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0"></iframe><h4>live media</h4></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt">this is some text div with a <a href="javascript:void(0)">clickable anchor</a></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/320x200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x300"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><p>this is some paragraph with a <a href="javascript:void(0)">clickable anchor</a> and a tiny image <img src="http://dummyimage.com/35"> somewhere inside</p></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/100x150"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/300x320"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/200"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/400x100"></div></div>
            <div class="rcb-cmp-item"><div class="rcb-cmp-item-cnt"><img src="http://dummyimage.com/257x133"></div></div>
        </div>
    </div>
1
répondu Rene van der Lende 2015-11-21 02:39:15
la source

vous n'avez pas besoin de faire un travail complexe ici, juste mis !important

.outer-div {
    text-align: center;
    width: 100%;
}

.inner-div {
    text-align: left !important;
    display: inline;
}

"!important "fonctionnera dans cette situation

0
répondu Navaj Mulla 2015-10-29 14:44:40
la source

je n'ai pas de temps pour améliorer ce qui suit, mais, l'espoir peut vous aider d'une certaine façon! De nombreux cas sont couverts! Utilisez Flexbox si vous recherchez une solution PureCSS!

.flex-container {
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.flex-item {
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
.flex-item:last-child { margin-right: auto }


/** IGNORE FOLLOWING **/
.flex-container {
  padding: 1em;
  border: 1px solid black;
  margin: 0 0 1em 0;
}
.box {
  width: 100px;
  height: 100px;
  visibility: visible;
  margin: 15px;
}

.size-lg { width: 90% }
.size-sm { width: 60% }
.size-xs { width: 40% }

.size-lg .box { background-color: yellow; }
.size-sm .box { background-color: yellow; }
.size-xs .box { background-color: yellow; }
<div class="flex-container size-lg">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-sm">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>

<div class="flex-container size-xs">
  
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  <div class="flex-item box"></div>
  
</div>
0
répondu Hitmands 2015-10-29 16:20:31
la source

je pense que j'ai une solution.

en traitant .inner comme un bloc en ligne, vous pouvez utiliser text-align: center pour garder le groupe d'articles au milieu d'un div de largeur de 100%. Qui des échelles de bien.

.outer {
    width: 100%;
    text-align: center;
}

.inner {
    display: inline-block;
}

.item {
    display: inline-block;
    float: left;
    margin: 5px;
    width: 100px;
    height: 100px;
}

Get 'fiddle with it: http://jsfiddle.net/sLz2ok92/2 /

-1
répondu Will Thresher 2015-10-29 15:56:30
la source

il suffit d'ajouter float: left; à .image-div classe

.image-div {
    display: inline;
    float:left;
}

exemple: https://jsfiddle.net/czdwkxq7 /

-2
répondu Yuriy Yakym 2015-10-18 02:42:04
la source

body {
    margin: 10px 0;
}

.outer {
    text-align: left;
    width:90%;
    margin:auto;
    
}
.inner {
    font-size: 0; /* fix for gaps */
    display: inline-block;
    text-align: left;
}
.item {
    font-size: 16px; /* reset size */
    display: inline-block;
    margin: 5px; /* gutter */
    height:100px;
    width:100px;
    background:yellow;
}
<div class="outer">
    <div class="inner">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        
    </div>
</div>
-2
répondu Mitul 2015-10-23 06:38:18
la source

Pour ce faire, vous devez utiliser inline-block. Voici un bon guide pour cela: http://learnlayout.com/inline-block.html

et j'ai fait un codepen qui est un peu comme votre projet ici: http://codepen.io/noxlux/pen/rOYYdW

body {
background: cadetblue;
}
.outer {
  padding: 3%;
}
.inner {
  background: aliceblue;
  padding: 1%;
}
.square {
  height: 100px;
  width: 100px;
  padding: 10px;
  margin: 10px;
  background: firebrick;
  display: inline-block;
}


<div class="outer">
  <div class="inner">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>
</div>
-4
répondu noxlux 2015-10-18 03:44:42
la source

Autres questions sur