Bootstrap ou autre, probleme placement des boites par ¯\_(ツ)_/¯ - page 1

Bonjour,

Depuis la journée d'hier je suis bloqué sur la même problématique.

Je voudrais faire une mise en page façon bande dessinée, et comme certaines cases font parfois 2 lignes de hauteur, que la mise en page comble les espaces libres sans casser l'ordre des vignettes.

Par exemple, les cases 21 et 22 devraient se placer sous les cases 18 et 19, comme cela se passe, par exemple, pour les cellules 12-13 avec 10-11.

Si vous connaissez une astuce je suis tout ouvert

En tout cas merci de votre attention

Julien !

ps. : si vous voyez comment faire que la cellule centrale fasse 2 lignes et que les cellules -2 et -1 s'empilent ensemble, tout comme +1 et +2 ca serait génial; même si je doute que cela soit vraiment possible sans passer par un systeme de boites dans des boites, mais au cas où.. je demande

ci-joint la version code-pen: https://codepen.io/JPlume/pen/vpQJPw

soit le fichier html suivant:

<!doctype html>
<html>
<meta charset="utf-8" />
<head>
  <!--<link rel="stylesheet" href="./assets/css/bootstrap.css">-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!--<link rel="stylesheet" href="style2.css" />
  <link rel="stylesheet" href="style.css" /> -->

  <title>homepage</title>
</head>

<body>
  <div class="container">

      <div class="title col-12">Home title</div>
      <div class="square col-lg-4">01 Largeur 4</div>
      <div class="square col-lg-4">02 Largeur 4</div>
      <div class="square col-lg-4">03 Largeur 4</div>
      <div class="square col-lg-4">04 Largeur 4</div>
      <div class="dbsquare col-lg-8">05 Largeur 8</div>
      <div class="square col-lg-4">06 Largeur 4</div>
      <div class="square col-lg-4">07 Largeur 4</div>
      <div class="square col-lg-4">08 Largeur 4</div>
      <div class="vertical col-lg-4">09 Largeur 4 /hauteur 2</div>
      <div class="square col-lg-4">10 Largeur 4</div>
      <div class="square col-lg-4">11 Largeur 4</div>
      <div class="square col-lg-4">12 Largeur 4</div>
      <div class="square col-lg-4">13 Largeur 4</div>
      <div class="vertical col-lg-4">14 Largeur 4 /hauteur 2</div>
      <div class="dbsquare col-lg-8">15 Largeur 8</div>
      <div class="square col-lg-4">16 Largeur 4</div>
      <div class="square col-lg-4">17 Largeur 4</div>
      <div class="square col-lg-4">18 Largeur 4</div>
      <div class="square col-lg-4">19 Largeur 4</div>
      <div class="vertical col-lg-4">20 Largeur 4 /hauteur 2</div>
      <div class="square col-lg-4">21 Largeur 4</div>
      <div class="square col-lg-4">22 Largeur 4</div>
      <div class="square col-lg-4">23 Largeur 4</div>

      <div class="square col-lg-4">24 Largeur 4</div>
    </div>

    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script type="text/javascript">
  new Vue({

  }]
</script>*/ -->

</html>

et son copain css:

/*[class*="col-"], footer {
  background-color: lightgreen;
  border: 1px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
  height: 33vh;
  width: 33vh;*/

.title {
      border: 1px solid black;
  background-color: grey;
  height: 33vh;
}

.square {
      border: 1px solid black;
  height: 33vh;

  background-color: lightgreen;

}

.dbsquare {
      border: 1px solid black;
  background-color: orange;
  height: 33vh;

}

.vertical {
      border: 1px solid black;
  background-color: darkred;

  height: 66vh;
}

.right {}

.left {}

.container {
    border: 3px solid black;
  position: relative;
}

¯\_(ツ)_/¯

18 janvier 2018 à 11:57:49

Mewen_bzh

18 janvier 2018 à 12:03:18

Salut,

J'ai bien peur que Bootstrap ne soit pas très adapté à cet usage sans des modifications relativement lourdes.

Si Bootstrap n'est un prérequis indispensable pour toi, je te conseille de regarder du côté du module CSS Grid qui est parfaitement adapté à ce type de problématique.

Je ne réponds pas aux messages privés.

18 janvier 2018 à 16:40:56

Merci Mewen_bzh pour ton support rapide;

Je creuse un peu le css grid, mais je risque d'avoir beaucoup trop d'elements à placer pour réussir à tout definir manuellement; La structure que je cherche à construire aura plus ou moins le même rôle qu'un portfolio, à voir s'il faut que je le rende filterable. En tout cas je ne connaissais pas du tout le système des grids c'est très interessant, merci de m'avoir ouvert cette porte

Je ne peux pas non plus utiliser le jquery masonry qui peut poser des problèmes avec vue.js :/

Bootstrap ou autre, probleme placement des boites

Bootstrap ou autre, probleme placement des boites

Supprimer

Modérer

Signaler le message aux modérateurs