1
J'essayais d'obtenir la mise en page ci-dessous avec CSS. Voici la mise en page pression:Bloc de galerie d'images avec CSS avec différentes dimensions d'image?
https://archive.org/details/Untitled1_20161122
Sans maçonnerie car cela est impossible avec la maçonnerie, je suppose que (ligne/colonne largeur/hauteur les changements qui n'est pas le cas dans la maçonnerie, je peux me tromper bien). Y a-t-il une belle solution CSS pure? Cela serait très appréciable. Je cherchais depuis longtemps une solution CSS. www.bata.com par exemple ont des résultats similaires dans leur page d'accueil si cela aide à expliquer le but, et sans maçonnerie en ce qui me concerne.
Voici mon code:
.gallery {
\t \t \t \t width: 70%;
\t \t \t \t margin: 0 auto;
\t \t \t \t background: crimson;
\t \t \t \t position: relative;
\t \t \t }
\t \t \t .col-20 {
\t \t \t \t width: 20%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t .col-40 {
\t \t \t \t width: 40%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t .col-60 {
\t \t \t \t width: 60%;
\t \t \t \t float: left;
\t \t \t \t /*border: 1px solid red;*/
\t \t \t }
\t \t \t div {
\t \t \t \t overflow: hidden;
\t \t \t }
\t \t \t img {
\t \t \t \t width: 100%;
\t \t \t \t height: auto;
\t \t \t }<div class="gallery">
\t <div class="col-40">
\t \t <img src="1.png" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="2.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="3.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="4.png" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="2.jpg" alt="">
\t </div>
\t <div class="col-20">
\t \t <img src="3.jpg" alt="">
\t </div>
</div>Merci à l'avance.
Pourriez-vous s'il vous plaît poster un lien vers le site Web? –
En outre, j'ai édité la question avec un extrait de code, donc ce serait génial si vous pouviez télécharger les images quelque part et les lier ici ... essayez https://archive.org/ –
Salut, j'ai fait les modifications suggérées. Merci. Avez-vous des suggestions sur la solution btw? –