web-dev-qa-db-fra.com

Modifier le flux de direction des colonnes CSS

J'ai donc du CSS comme ça:

#blogPosts{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

et cela crée parfaitement 3 colonnes mais quand je gagne une autre ligne, l'ordre semble sortir verticalement comme:

1,3,5
2,4,6

Au lieu de ce que je veux en tant que:

1,2,3
4,5,6

Important!

Un autre attribut important dont j'ai besoin, c'est qu'il doit y avoir une marge définie entre chaque poste verticalement. Ainsi, par exemple, si vous regardez le tableau ci-dessus si 2 est plus long que 1, le sommet de 4 démarrera y ci-dessous 1 plutôt que: le height of 2 + y.

Le HTML est comme ceci:

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

Que puis-je faire pour résoudre ce problème?

Je suis heureux pour toutes les solutions, même celles qui incluent javascript/jquery

This est le genre de chose que je recherche

enter image description here

htmlcsscss3flexboxcss-multicolumn-layout
38
maxisme

Une approche consiste à utiliser flexbox

#blogPosts {
   display: flex;
   align-items: left;
   justify-content: left;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   align-content: flex-end;
}

http://jsfiddle.net/o59gc4hw/2/

13
Miguel Mota

Eh bien, à première vue, je pensais que vous devriez regarder la bibliothèque Maçonnerie . Lorsque vous recherchez ensuite la maçonnerie, vous trouverez peut-être également boîte flexible de maçonnerie et colonnes de maçonnerie .

Le problème avec les colonnes et les solutions de boîte flexible est que les premiers éléments sont dans la première colonne.

J'ai trouvé une solution possible, qui ne fonctionne que lorsque votre nombre d'articles est fixe.

Pour neuf éléments dans trois colonnes:

#blogPosts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.blog {
  color: white;
  width: 33%;
}
.blog:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.blog:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.blog:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
  page-break-after: always;
  -webkit-break-after: always;
     -moz-break-after: always;
          break-after: always;
}
<div id="blogPosts">
    <div class="blog" style="background-color:blue; height:50px;">1</div>
    <div class="blog" style="background-color:red; height:75px;">2</div>
    <div class="blog" style="background-color:green; height:100px;">3</div>
    <div class="blog" style="background-color:black; height:30px;">4</div>
    <div class="blog" style="background-color:yellow; height:50px;">5</div>
    <div class="blog" style="background-color:purple; height:80px;">6</div>
    <div class="blog" style="background-color:pink; height:150px;">7</div>
    <div class="blog" style="background-color:orange; height:15px;">8</div>
    <div class="blog" style="background-color:gold; height:50px;">9</div>
</div>

Ce qui précède utilise la boîte flexible, avec la propriété order et les sélecteurs enfants nth. Et enfin voir aussi: Comment spécifier un élément après quoi encapsuler dans css flexbox?

3
Bass Jobsen

Cela peut être implémenté avec un simple CSS. HTML:

<div id="blogPosts">
<div class="blog">1Content</div>
<div class="blog">1Content</div>
<div class="blog">2Content</div>
</div>

CSS: faites de la classe "blog" un bloc en ligne et flottez à gauche comme indiqué ci-dessous.

.blog {
     display: inline-block;
     width: 33.3%;
     float: left;
     margin-bottom: -999em;
     padding-bottom: 999em; 
}

#blogPosts{
    overflow: hidden;
}

Cela résoudra également le problème de hauteur que vous aviez. :)

0
Prashanth Jagadeesh

Je crois que vous ne comprenez pas comment fonctionne la séparation des colonnes avec les colonnes CSS. Votre classe blogPosts sépare le contenu aussi uniformément que possible sur 3 colonnes afin qu'il apparaisse comme:

1 3 5
2 4 6


mais si vous le faites

<div class="blogPosts">
    Content 1
</div>
<br>
<div class="blogPosts">
    Content 2
</div>
<br>
<div class="blogPosts">
     Content 3
</div>

Ensuite, les conents apparaîtraient comme:

1
2
3

mais le contenu de ces sections correspondrait aux 3 colonnes.

0
Chacliff