div交错布局实现

最新推荐文章于 2022-10-14 21:30:33 发布

sliverhumor

最新推荐文章于 2022-10-14 21:30:33 发布

阅读量1k

点赞数

分类专栏：前端文章标签：布局交错 css

本文链接：https://blog.csdn.net/qq_18887855/article/details/94297980

版权

在一次面试中，作者遇到了如何使用CSS实现特定交错布局的问题。由于找不到现成的解决方案，作者自行研究并编写了代码，成功解决了这个问题。

摘要由CSDN通过智能技术生成

前端时间去面试,被问到如何实现如下布局,在网上查了很长时间没查到一个具体的解决方法,于是自己写了一个,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--通过绝对布局让3个div重叠放置  12在一个里面 34在一个里面 5在一个里面-->
    <style type="text/css">
        body{
        	height: 100vh;
        }
        .main{
            height: 100%;
            display: flex;
            width: 100%;
            position:absolute; 
            left:0px; 
            top:0px;
        }
    	.main1{
    		flex-wrap: wrap;
    	}
        .main2{
            align-items:flex-end;
        }
         .main3{
            align-items:center;
            justify-content:center;
        }
    	.child1{
    		width: 20%;
    		height: 80%;

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sliverhumor

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div交错布局实现

前端时间去面试,被问到如何实现如下布局,在网上查了很长时间没查到一个具体的解决方法,于是自己写了一个,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <...
复制链接

扫一扫