前段时间的面试，内容为提供3个DIV：
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
要求使用css实现如下图的布局，其中，d1、d2宽50px，高50px，d3宽50px，高100px：
布局
实现万岁主义法：
float、posistion-absolute ：这些都会让元素脱离标准文档流
为d1 d2用一个新的元素包裹：增加了不必要的东西
优雅的方法：
使用Grid布局
<head>
<title>3div</title>
<style>
body {
display:grid;
grid-template-columns : 50px 50px; /*绘制2根纵线*/
grid-template-rows : 50px 50px; /*绘制2根横线*/
}
.d1{
background-color: red;
grid-area: 1/1/2/2;/* 元素高度：从第一条线到第二条线；宽度：从第一条线到第二条线*/
}
.d2{
background-color: blue;
grid-area: 2/1/3/2;/* 元素高度：从第二条线到第三条线；宽度：从第一条线到第二条线*/
}
.d3{
background-color: lime;
grid-area: 1/2/3/3;/* 元素高度：从第一条线到第三条线；宽度：从第二条线到第三条线*/
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
效果：
捕获.PNG
原理：将父容器横纵切割了2条线，将3个元素按照下图虚线位置来确定宽高：
捕获1.PNG
网友评论