C'est mon code

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
    </div>
    <div class="col-md-3">
      <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
      <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
    </div>
    <div class="col-md-3">
      <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
      <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">

enter image description here

Je veux une mise en page comme celle-ci:

enter image description here

J'ai ceci:

enter image description here

enter image description here

Comment puis-je faire?

0
Yossawan Thatsana 6 nov. 2019 à 17:03

2 réponses

J'utiliserais une mise en page Grid: par exemple avec grid-template vous définissez la position des zones disponibles, puis avec grid-area vous affectez une zone spécifique à un élément

main {
  display: grid;
  grid-template: 
     "c1 c1 c2 c5"
     "c1 c1 c3 c5"
     "c1 c1 c4 c6"
}

section {
  border: 1px #446 solid;
  margin: 2px;
  min-height: 100px;
}

.c1 { grid-area: c1; }
.c2 { grid-area: c2; }
.c3 { grid-area: c3; }
.c4 { grid-area: c4; }
.c5 { grid-area: c5; }
.c6 { grid-area: c6; }
<main>
  <section class="c1">1</section>
  <section class="c2">2</section>
  <section class="c3">3</section>
  <section class="c4">4</section>
  <section class="c5">5</section>
  <section class="c6">6</section>
</main>
2
fcalderan 6 nov. 2019 à 14:10

Vous n'utilisez pas correctement les colonnes. Utilisez ce code

 <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="https://s21466.pcdn.co/wp-content/uploads/2018/02/Logo-FIVB-Liga-nacija-1.jpg" width="500" height="640">
            </div>
            <div class="col-md-3">
                <img src="https://i.ytimg.com/vi/hDUG_ZCg5N8/maxresdefault.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/turkey-women-team-preview-volley.jpg" width="320" height="213">
                <img src="https://www.4baht.com/wp-content/uploads/2019/05/germany-women-team-preview-volle.jpg" width="320" height="213">
            </div>
            <div class="col-md-3">
                <img src="https://cdn8.volleyball.it/wp-content/uploads/2018/10/VNL-Femminile-2019.jpeg" width="320" height="426">
                <img src="https://seekvectorlogo.net/wp-content/uploads/2019/04/federation-internationale-de-volleyball-fivb-vector-logo.png" width="320" height="213">
            </div>
        </div>
    </div>
0
Taimur Saeed 6 nov. 2019 à 14:19