Bootstrap et float

Question

Heimdalg

25 Nov 2016 à 17:36

Bonjour,
Je suis en train de créer une page avec un affichage sur 3 colonnes mais j'aimerais que les DIV s'imbriquent les unes dans les autres lorsque leur hauteur n'est pas la même. Au lieu de celà, le float se fait toujours vers la droite mais ne revient jamais à gauche de la DIV.
J'ai fais une image pour comprendre ce que je cherche à faire, cf pièce jointe.

J'utilise Bootstrap avec des colonnes comme ceci :
<div class="col-md-4"</div>
<div class="col-md-4"</div>
<div class="col-md-4"</div>
<div class="col-md-4"</div>
<div class="col-md-4"</div>
<div class="col-md-4"</div>
<div class="col-md-4"</div>

Quelqu'un aurait une solution?
merci!
Modifié par Heimdalg (25 Nov 2016 - 17:39)

~~supprimé~~

25 Nov 2016 à 18:35

Cela s'appelle un layout masonry. Tu as isotope qui permet de faire ça en js (tu peux partir de ta grille bootstrap pour le faire fonctionner).
Ou des solutions en css comme : HOW TO: Pure CSS masonry layouts. Reste à voir selon tes besoins en compatibilité.

Olivier C

25 Nov 2016 à 19:56

En tout cas, pour l'instant, il semble que ce n'est pas possible de le faire en CSS only. Enfin... certains se sont attelés à la tâche avec column-count, mais je n'ai pas encore testé (affaire à suivre en ce qui me concerne). Le sésame ultime sera avec Grid CSS mais il faut attendre un support par les navigateurs (IE pour l'instant).
Modifié par Olivier C (25 Nov 2016 - 19:56)

Olivier C

26 Nov 2016 à 07:45

Suite à cette question je me suis pris au jeu car cette fonction manquait à mon framework perso. Je m'y suis donc collé ce matin.

Voici donc le résultat basé sur les observations des sites précédemment cités : CodePen - Responsive Masonry in CSS only

Plutôt intéressant, pas compatible avant la version 10 d'Internet Explorer, mais c'est déjà très bien. J'adopte le concept, merci d'avoir posé la question.
Modifié par Olivier C (26 Nov 2016 - 14:07)

Heimdalg

27 Nov 2016 à 12:32

merci bzh pour ta réponse et merci pour ton adaptation Olivier.
Cela ne répond pas vraiment à ma question puisque je ne voulais pas afficher les DIV par colonnes mais par lignes.
En gros ton DIV 19/ devrait afficher le 2/ et ton DIV 38/ : le 3/
(enfin selon la largeur affichée en cours, chez moi j'ai les DIV 1, 19 et 38 en haut de page)

Ca serait comme d'afficher les trois dernières news en haut de page par exemple.
Là j'ai la 19ème news en haut de page.
Modifié par Heimdalg (27 Nov 2016 - 12:44)

Olivier C

27 Nov 2016 à 17:54

Heimdalg a écrit :
Cela ne répond pas vraiment à ma question puisque je ne voulais pas afficher les DIV par colonnes mais par lignes.

C'est vrai, mais c'est un compromis obligatoire pour du full css. La solution d'un placement par ligne est inenvisageable pour l'instant sans JS. Ou, comme je le disais plus haut, avec CSS Grid, mais seulement supporté par IE pour l'instant (avec des flags pour certains autres browsers).

Heimdalg

27 Nov 2016 à 20:50

ça marche
je pense que je vais utiliser Isotope du coup
bière chaude virtuelle depuis strasbourg à vous deux.

~~supprimé~~

28 Nov 2016 à 10:48

Olivier C a écrit :
Suite à cette question je me suis pris au jeu car cette fonction manquait à mon framework perso. Je m'y suis donc collé ce matin...Voici donc le résultat

Trop TOP l'Ami, j' en garde un model minimum Smiley cligne

tout en gardant les qualités responsives !
Mille mille mercis à toi Smiley smile


<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Responsive Masonry in CSS only</title>
  <style>
  .masonry {  margin: 1.5rem 0;  -webkit-column-gap: 1.5rem;     -moz-column-gap: 1.5rem;          column-gap: 1.5rem;}
@media (min-width: 36.01rem) {
  .masonry {    -webkit-column-count: 2;  -moz-column-count: 2;  column-count: 2;  }
}
@media (min-width: 65.01rem) {  
  .masonry {    -webkit-column-count: 3; -moz-column-count: 3;  column-count: 3; }
}
@media (min-width: 90.01rem) {
  .masonry {    -webkit-column-count: 4; -moz-column-count: 4;   column-count: 4; }
}
@media (min-width: 120.01rem) {
  .masonry {    -webkit-column-count: 5; -moz-column-count: 5;   column-count: 5; }
}
.masonry > * {  display: inline-block;  width: 100%;
  margin: 0 0 1.5rem;  padding: 0 1em;  box-sizing: border-box;}
body {  margin: 1em;  line-height: 1.67;  font-family: 'Open Sans', Arial, Sans-serif;  background: #333;}
.wrapper {  max-width: 90rem;  margin: 3em auto;}
a {  text-decoration: none;}
a:focus,
a:hover,
a:active {  text-decoration: underline;}
h1, .intro p {  text-align: center;  color: Tan;}
a {  color: Peru; }
.masonry > * {  position: relative;  color: #333;  background-color: Peru;
  -webkit-transition: background-color 0.3s ease-in-out;  transition: background-color 0.3s ease-in-out;
  border-radius: 0.3rem;}
.masonry > :hover {  background-color: Tan;}
.masonry > p {  counter-reset: div;}
.masonry > * {  counter-increment: div;}
.masonry > * p:first-child::before {  display: inline;  content: counter(div) '/ ';}
</style>
</head>

<body translate="no" >
<h1>Responsive Masonry in CSS only</h1>
<div class="intro">
  <p>Browser compatibility, see: <a href="http://caniuse.com/#feat=multicolumn" target="_blank">Can I Use</a>.</p>
</div>
<div class="wrapper">
  <div class="masonry">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus non tellus nec egestas.</p>
      <p>Donec ornare, nibh nec lacinia efficitur, lectus dolor consequat sem, eu sagittis nisi lectus eget mi. Nulla non metus nulla.</p>
    </div>
    <div>
      <p>Nulla facilisi. Mauris vitae orci ullamcorper elit fringilla volutpat.</p>
    </div>
    <div>
      <p>Donec at efficitur augue. Duis ornare diam et tristique ullamcorper. Sed ullamcorper leo at ligula ultricies feugiat. Vivamus erat purus, blandit sit amet est sed, feugiat iaculis dolor.</p>
    </div>
    <div>
      <p>Aliquam erat volutpat. Nulla facilisi. Phasellus ac leo vel est ultricies faucibus. Sed id semper diam.</p>
    </div>
    <div>
      <p>Fusce eros mauris, congue vitae purus quis, suscipit semper metus.</p>
    </div>
  </div>
</div>
</body>
</html>

Sujet clos

Questions générales et questions de débutants

Bootstrap et float