![](/img/trans.png)
[英]Flex / grid layout. Need advice how to lay out blocks properly using Flex of Grid CSS model
[英]How to mark up a layout blocks with the CSS property “display:flex;”?
在其中一個項目中決定使用新的CSS屬性“ display:flex;”。 看了很多文章之后,還不了解是否有可能在不違反HTML代碼的情況下制作這樣的布局塊。
見圖片:
.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>
在JSFiddle上也有一個准備好的代碼
對不起我的英語不好。
更新為使用CSS列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);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.