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">
Je veux une mise en page comme celle-ci:
J'ai ceci:
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
De nouvelles questions
html
HTML (HyperText Markup Language) est le langage de balisage pour créer des pages Web et d'autres informations à afficher dans un navigateur Web. Les questions concernant le HTML doivent inclure un exemple reproductible minimal et une idée de ce que vous essayez d'accomplir. Cette balise est rarement utilisée seule et est souvent associée à [CSS] et [javascript].