In one of the project decided to use the new CSS property "display:flex;". After reading many articles and did not understand whether it is possible to make such a layout blocks without violating HTML code.
See image:
.container { width:910px; display:flex; } figure { position:relative; width:300px; height:180px; } figure:first-child { width:600px; height:370px; } figure:first-child figcaption { width:590px; } figure figcaption { position:absolute; z-index:10; bottom:0; left:0; padding:5px; width:290px; background-color:rgba(0,0,0,.3); }
<div class="container"> <figure> <img src="http://placehold.it/600x370" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> <figure> <img src="http://placehold.it/300x180" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> <figure> <img src="http://placehold.it/300x180" alt=""> <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption> </figure> </div>
Also there is a ready code on JSFiddle
Sorry for my English.
Updated to use CSS columns https://jsfiddle.net/vzjhybh0/4/
<figure>
<img src="http://placehold.it/600x370" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/300x180" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
<figure>
<img src="http://placehold.it/300x180" alt="">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
</figure>
</div>
.container {
width:1100px;
height:400px;
-webkit-columns: 2;
}
figure {
position:relative;
width:300px;
height:180px;
}
figure:first-child {
width:600px;
height:370px;
}
figure:first-child figcaption {
width:590px;
}
figure figcaption {
position:absolute;
z-index:10;
bottom:0;
left:0;
padding:5px;
width:290px;
background-color:rgba(0,0,0,.3);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.