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

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

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

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

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

一、兼容方案 float

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

HTML部分：

float 实现

a

b

c

d

e

CSS部分：

* {

-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 { </