2
votes

Disposition des éléments en html

Est-il possible de réaliser cette structure en utilisant html + css?

Mais au lieu d'avoir cet espace vertical entre les blocs orange, je veux être l'un dans le haut de l'autre.

J'ai utilisé flex et grid mais pas vraiment réussi jusqu'à présent :(

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

.container {
  padding: 10px;
  border: 1px solid red;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.big {
  width: calc(60% - 22px);
  padding: 10px;
  background: lime;
  height: 100px;
  margin-bottom: 10px;
}

.small {
  width: calc(40% - 22px);
  height: 100px;
  padding: 10px;
  background: orange;
  margin-bottom: 10px;
}

html css flexbox css-grid

3 commentaires

Vous pouvez re-arragnez le div

I AM BIG 1

I AM SMALL 1

JE SUIS GRAND 2

JE SUIS PETIT 2

JE SUIS GRAND 3

I AM BIG 4

ou si vous ne voulez pas réorganiser la structure html, vous pouvez utiliser la propriété order en css. ref: css-tricks.com/almanac/properties/o/order

Vous pourrez peut-être le faire en utilisant la grid-area . Voici un guide très utile: css-tricks.com/snippets/css/ grille-guide-complète

Vous pouvez utiliser le framework Bootstrap pour accomplir votre tâche. Pourquoi écrire du code personnalisé si vous avez déjà quelque chose de prêt à l'emploi, vous pouvez utiliser le framework et vous concentrer sur vos autres tâches de développement.

4 Réponses :

5
votes

Vous pouvez le faire facilement avec la disposition de la grille CSS:

vous pouvez utiliser grid-template-columns: 3fr 2fr; car vous avez un ratio de 60% à 40% du grand et du petit éléments,
la hauteur des lignes peut être définie à l'aide de grid-auto-rows: 100px ,
la marge entre les lignes peut être définie à l'aide de la propriété grid-row-gap ,
définissez maintenant le grand pour toujours occuper la première colonne en utilisant grid-column: 1 et le petit pour toujours occuper le seconde.

Voir la démo ci-dessous pour la configuration jusqu'à maintenant:

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr; /* two columns */
  grid-auto-rows: 100px; /* row height */
  grid-row-gap: 10px; /* gap between rows */
  grid-auto-flow: dense; /* added */
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1; /* in first column */
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2; /* in second column */
}

Maintenant, ajoutez simplement grid-auto-flow: dense pour tirer les blocs orange vers le haut - voir la démo ci-dessous:

<div class="container">
  <div class="big"> I AM BIG 1</div>
  <div class="small"> I AM SMALL 1</div>
  <div class="big"> I AM BIG 2</div>
  <div class="big"> I AM BIG 3</div>
  <div class="big"> I AM BIG 4</div>
  <div class="small"> I AM SMALL 2 </div>
</div>

.container {
  padding: 10px;
  border: 1px solid red;
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-auto-rows: 100px;
  grid-row-gap: 10px;
}

.big {
  padding: 10px;
  background: lime;
  grid-column: 1;
}

.small {
  padding: 10px;
  background: orange;
  grid-column: 2;
}

1 commentaires

Cela a l'air bien et exactement ce dont j'ai besoin, mais si j'ai 3 tailles, sera-t-il également possible? Je veux dire 3 blocs comme 30% 40% et un autre 30%

1
votes

Vous pouvez simplement modifier cela en changeant l'ordre de vos divs comme

<div class="container">
    <div class="big"> I AM BIG 1</div>
    <div class="small"> I AM SMALL 1</div>
    <div class="big"> I AM BIG 2</div>
    <div class="small"> I AM SMALL 2 </div>
    <div class="big"> I AM BIG 3</div>
    <div class="big"> I AM BIG 4</div>  
</div>

J'espère que c'est ce que vous cherchiez.

0 commentaires

3
votes

Si vous prévoyez d'utiliser flex, je vous suggère de diviser votre conteneur en deux colonnes, ce qui facilite la tâche. C'est un code de test que j'ai fait pour y parvenir. J'espère que cela vous aidera.

HTML

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
  align-items: center;
}

.big-box {
  background-color: green;
  width: 400px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.small-box {
  background-color: orange;
  width: 300px;
  height: 100px;
  margin: 2px 0;
  padding: 10px;
}

.mr-1 {
  margin-right: .5rem;
}

CSS

<div class="d-flex flex-row">
  <div class="d-flex flex-column mr-1">
    <div class="big-box">
      BOX 1
    </div>
    <div class="big-box">
      BOX 2
    </div>
    <div class="big-box">
      BOX 3
    </div>
    <div class="big-box">
      BOX 4
    </div>
  </div>
  <div class="d-flex flex-column">
    <div class="small-box">
      BOX 5
    </div>
    <div class="small-box">
      BOX 6
    </div>
  </div>
</div>

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/uvr0hzkw/

0 commentaires

0
votes

<body>
<div class="main">
<div class="left">
  <div class="lime-block">I AM BIG 1</div>
  <div class="lime-block">I AM BIG 2</div>
  <div class="lime-block">I AM BIG 3</div>
  <div class="lime-block">I AM BIG 4</div>
</div>
<div class="right">
  <div class="orange-block">I AM SMALL 1</div>
  <div class="orange-block">I AM SMALL 2</div>
</div>
</div>
</body>

.main{
border: 1px solid red;
padding: 5px;
display:flex;
justify-content:space-between;
}
.left{
width:59.8%; 
}
.right{
width:39.8%;
position:relative;
display:block;
}
.right .orange-block:last-child{
  position:absolute;
  display:block;
  bottom:0;
  width: -webkit-fill-available;
}
.lime-block,.orange-block{
  margin-bottom:5px;
  height:80px;
  padding:5px;
}
.lime-block:last-child,.orange-block:last-child{
  margin-bottom:0px;
}
.lime-block{
  background:lime;
}
.orange-block{
  background:orange;
}

1 commentaires

c'est un code simple comme vous le souhaitez en flex et il prend également en charge le contenu dynamique.