1.grid布局实现
这种方式不容易想到,但是现在主流浏览器已经支持grid布局了,所以以后可以考虑考虑。
实现思路:
- 给容器设置等宽两列,根据grid默认布局“先行后列”特点,此时会展示成这样:
- 接下来只要让第一个项目/元素(item)占满一列就可以了,设置垂直网格线的起始位置就可以了(两列在垂直方向上有3条网格线)。
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.father {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.son-1 {
grid-column-start