Pour la vie de moi, je ne peux pas penser par où commencer ici - en gros, ce que je veux réaliser, c'est une ligne à trois colonnes, dans laquelle les colonnes peuvent s'emballer si elles ne peuvent pas s'adapter horizontalement. La hauteur de la ligne doit être la plus petite pour s'adapter aux articles, avec une hauteur fixe lorsque toutes les cellules sont alignées. Le contenu des "cellules" doit être centré verticalement si la ligne est trop grande pour elles, par exemple:

[           ] [ Big     ] [           ]
[  Content1 ] [         ] [ Content2  ]
[           ] [ Content ] [           ]

Devrait envelopper quelque chose comme ...

[           ] [ Big     ]
[  Content1 ] [         ] 
[           ] [ Content ]
      [ Content2  ]

Alors...

[  Content1 ] 
 [ Big     ]
 [         ] 
 [ Content ]
[ Content2  ]

Le problème que je rencontre est ... comment puis-je réduire / augmenter la hauteur des "cellules" pour être le plus grand de leur propre contenu et de leur contenu de voisins horizontaux?

La meilleure idée que j'ai eue est d'utiliser JS pour regarder le offsetHeight afin de déterminer s'ils sont sur la même "rangée", puis d'ajuster la hauteur en conséquence .. mais cela semble un peu maladroit. De meilleures idées?

Merci les gars!

1
Michael 13 juil. 2015 à 05:07

3 réponses

Meilleure réponse

Quelque chose comme ça?

.row {
    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
}

.row div {
    border: 1px solid;
    margin: .5em;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

p {
    margin: .5em;
}
<div class="row">
    <div>
        <p>Content 1</p>
    </div>
    <div>
        <p>Big</p>
        <p>Content</p>
    </div>
    <div>
        <p>Content 1</p>
    </div>
</div>

(voir jsfiddle)

1
Ilya Streltsyn 13 juil. 2015 à 06:30

Vous pouvez utiliser ce code, il vous aidera ...

.selector {

display:inline-flex;
justify-content:center;
max-width:(expected width);
max-height:(expected height);
width:100%;
height:100%;
margin:auto;

}
0
John Rey M. Baylen 13 juil. 2015 à 03:27

Vous pouvez utiliser display:inline-block sur chacun de ceux contenant des divs. qui augmentera la hauteur jusqu'au div le plus haut et s'enroulera comme vous l'avez décrit

1
Ed Ballot 13 juil. 2015 à 02:34