3种方案实现跨行或跨列布局

今天要讲解的这个问题是之前一位小伙伴在群里请教的提问,是关于跨行跨列的布局,如下图是他要实现的具体布局,看似是最简单的二维布局,实际透露出整个CSS的发展方向。向前可以考察对兼容性的处理功底,向后可以考察对CSS新特性的洞察能力。可攻可受,攻守兼备。

3种方案实现跨行或跨列布局

如果对此问题感兴趣的小伙伴先不要往下看我写的方案,自己想想在实际项目中遇到你会怎么做呢?

需要注意的是:这是一个两端对齐的布局,需要仔细考虑中间空隙的处理。

这里我给出三种方案实现,分别使用css中属性float实现、flex实现、grid实现

一、兼容方案 float

我想大家最容易想到的就是运用 float 的浮动特性,为了更好的处理间距,我们需要三层结构,利用 margin 负值来抵消间距,形成视觉上的两段对齐效果。

HTML部分:

1
2
3
4
5
6
7
8
9
10
<h2>float 实现</h2>
<section class="demo">
  <div class="float">
    <section class="a">a</section>
    <section class="b">b</section>
    <section class="c">c</section>
    <section class="d">d</section>
    <section class="e">e</section>
  </div>
</section>

CSS部分:

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
36
37
38
39
40
41
42
43
44
45
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
h1,
h2 {
  text-align: center;
  color: #555;
}
.demo {
  width: 620px;
  height: 310px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.demo section {
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 9px;
  border: 1px solid blue;
  background-color: #66B2EC;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  line-height: 150px;
}
.float {
  overflow: hidden;
  margin-right: -10px;
}
.float section {
  width: 200px;
  height: 150px;
  float: left;
}
.float .a {
  height: 310px;
}
.float:hover .a {
  width: 410px;
  height: 150px;
}

效果展示:

3种方案实现跨行或跨列布局

二、渐进增强 flex

flex 的处理需要一个小技巧,需要把主轴方向旋转90度,也就是 flex-direction: column。

  • 优点:

flex 可以较好的处理两端对齐布局,中间的空隙可以通过 align-content: space-between,justify-content: space-between 来实现自适应(但超过两行或两列时会有问题)。

  • 缺点:

需要通过 order 属性手动调节为正确的元素顺序。

HTML代码:

1
2
3
4
5
6
7
8
<h2>flex 实现</h2>
<section class="flex demo">
  <section class="a">a</section>
  <section class="b">b</section>
  <section class="c">c</section>
  <section class="d">d</section>
  <section class="e">e</section>
</section>

CSS代码:

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
36
.flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
}
.flex section {
  width: 200px;
  height: 150px;
  margin: 0;
}
.flex .a {
  height: 100%;
}
.flex .c {
  order: 4;
}
.flex .d {
  order: 3;
}
.flex .e {
  order: 5;
}
.flex:hover {
  flex-direction: row;
}

.flex:hover section {
  order: 0;
}

.flex:hover .a {
  height: 150px;
  width: 410px;
}

效果展示:

3种方案实现跨行或跨列布局

三、面向未来 grid

如果说从 Flex 开始 CSS有了真正的二维布局特性,那么 CSS Grid 将是二维布局的未来。

  • 优点:

(1)可以把传统的网页栅格体系直接对应到 CSS 声明,例如:

1
2
3
4
5
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

这样三句代码就表明我定义了一个两行三列的栅格,也就是题中的布局。

(1)通过 grid-column/row 属性里的 span 值可以方便的实现跨行或夸列,无需显性指定宽高的改变,非常方便的实现了跨行或夸列。

1
2
3
4
5
6
7
.grid .a {
    grid-row: span 2;
}
.grid .a:hover {
    grid-row: auto;
    grid-column: span 2;
}

最终实现代码

HTML代码:

1
2
3
4
5
6
7
8
<h2>grid 实现(Chrome 开启 flag)</h2>
<section class="grid demo">
  <section class="a">a</section>
  <section class="b">b</section>
  <section class="c">c</section>
  <section class="d">d</section>
  <section class="e">e</section>
</section>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.grid {
  display: -ms-grid;
  display: -webkit-grid;
  display: grid;
  -ms-grid-template-columns: 1fr 1fr 1fr;
  -webkit-grid-template-columns: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-template-rows: 1fr 1fr;
  -webkit-grid-template-rows: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.grid .a {
  -ms-grid-row: span 2;
  -webkit-grid-row: span 2;
  grid-row: span 2;
}
.grid .a:hover {
  -ms-grid-row: auto;
  -webkit-grid-row: auto;
  grid-row: auto;
  -ms-grid-column: span 2;
  -webkit-grid-column: span 2;
  grid-column: span 2;
}

效果展示:

3种方案实现跨行或跨列布局

这里网友推荐利用display:inline-block属性布局的方法

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div class="row">
        <div class="item col-1 row-2">A</div>
        <div class="item col-1 row-1">B</div>
        <div class="item col-1 row-2">C</div>
    </div>
    <div class="row" >
      <div class="item col-5 row-1">D</div>
      <div class="item col-5 row-1">E</div>
      <div class="item col-5 row-1">F</div>
    </div>
</body>

CSS代码:

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
36
<style type="text/css">
*{margin:0;padding:0;}
.row {
  height: 150px;
  font-size: 0;
}
.item {
  box-sizing: border-box;
  vertical-align: top;
  height: 100%;
  overflow-y: visible;
  overflow-x: hidden;
  background-color: maroon;
  box-shadow: 4px 4px 0 #fff, -4px -4px 0 #fff,4px -4px 0 #fff, -4px 4px 0 #fff;
  display: inline-block;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  padding: 8px;
}
.col-1 {
  width: 33.3333%;
}
.col-2 {
  width: 66.66666%;
}
.col-5{
    width:22.1333333%;
}
.row-1 {
  height: 100%;
}
.row-2 {
  height: 200%;
}
</style>

这里我们不讨论table布局,如果大家有更好的方案,欢迎留言投稿。

未经允许不得转载:码云笔记 » 3种方案实现跨行或跨列布局
喜欢(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

在线客服

在线客服

  • 扫描二维码,微信联系 扫描二维码,微信联系