Li RUONAN


一枚行走在前端道路上的程序媛 ~~


display: contents

本文转载于 大漠老师的文章

前两天,本人在开发新的需求,由于数据驱动视图的原因,导致在写页面时好多地方需要参数做判断,然而,这些判断很多时候是为了布局,而非逻辑。恰好,本人拜读了大漠老师的文章,学到了一项新技能 display: contents.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="container">
<ul class="feed">
<li><div class="card">Card 1</div></li>
<li><div class="card">Card 2</div></li>
<li class="test">
<ul>
<li><div class="card">Card A</div></li>
<li><div class="card">Card B</div></li>
<li><div class="card">Card C</div></li>
</ul>
</li>
<li><div class="card">Card 3</div></li>
<li><div class="card">Card 4</div></li>
</ul>
</div>

<style>
.container {
max-width: 800px;
margin: 0 auto;
}
.card {
min-height: 300px;
margin: 10px;
padding: 10px;
background-color: #ccc;
}
.feed ul,
.feed li {
display: contents;
}
.card {
flex: 1 0 40%;
}
</style>

display: contents 根据w3c的描述,其实就是忽略页面结构和界面,只将内容留下。即,元素自身不影响任何后代子元素的布局,属于同类布局的item。上述代码中,flex布局中,通过此方法,所有的card都属于container的子项目。