-6
A
回答
0
经过几次尝试,我想我得到了我正在寻找的东西。
body {
background: skyblue;
}
a {
text-decoration: none;
}
.wrapper {
margin: 2%;
}
.articles {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.article-card {
background-color: #FFF;
box-shadow: 0 4px 4px -4px rg;
}
.article-card--big {
width: calc(50% - 30px);
margin-right: 30px;
float: left;
}
.article-card--flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 50%;
}
.article-card--landscape {
width: calc(50% - 30px);
float: left;
margin-right: 30px;
margin-bottom: 30px;
}
.article-card--landscape:nth-child(3), .article-card--landscape:nth-child(4) {
margin-bottom: 0;
}
.card-content {
display: block;
padding: 15px;
}
.card-img {
display: block;
background: #ededed;
position: relative;
overflow: hidden;
}
.card-img:before {
display: block;
content: "";
width: 100%;
padding-top: 70%;
}
.card-img img {
position: absolute;
left: 0;
right: 0;
top: -100%;
bottom: -100%;
margin: auto 0;
width: 100%;
height: auto;
}
img {
max-width: 100%;
height: auto;
}
<div class="wrapper">
<section class="articles articles-category">
<article class="article-card article-card--big">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<div class="article-card--flex">
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
<article class="article-card article-card--landscape">
<a href="">
<span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
<span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
<span class="infos">
<span class="time">Há 21 horas</span>
</span>
</span>
</a>
</article>
</div>
</section>
</div>
相关问题
- 1. Flexbox:包装元素不嵌套
- 2. 嵌套的Flexbox行最长元素的宽度
- 3. 嵌套元素
- 4. JPA嵌套的嵌套集合元素
- 5. 嵌套的Flexbox网格
- 6. 使用flexbox内嵌两个元素
- 7. XSD嵌套元素
- 8. 嵌套CANVAS元素
- 9. 嵌套HTML元素
- 10. 骨干嵌套:渲染嵌套元素
- 11. 嵌套Flexbox打破父
- 12. 嵌套Flexbox扩展问题
- 13. :用嵌套sIFR的元素
- 14. PostgreSQL:JSON嵌套元素的SUM?
- 15. jQuery的不嵌套元素
- 16. 嵌套的DIV元素
- 17. 嵌套元素的Scrapy xpath
- 18. 在伪元素内嵌套伪元素
- 19. 元素'footer'不能嵌套元素'html'
- 20. 每行FlexBox元素
- 21. 嵌套元素和背景
- 22. 创建嵌套元素
- 23. CouchBase索引嵌套元素
- 24. XSLT/XSL Recusive嵌套元素
- 25. 嵌套自定义元素
- 26. JAXB绑定嵌套元素
- 27. 包含嵌套元素
- 28. 选择嵌套元素
- 29. Angular2 - 嵌套表单元素
- 30. 避免嵌套元素
欢迎SO。请在代码中添加一个起点,以便正确快速地回答您的问题。另请参阅http://stackoverflow.com/help/mcve – Roy
“任何人想法如何实现这个结果?”是与HTML和CSS。尝试编码。 – mlegg