例：

遇到这种布局要求我们应该怎么办？

方法1：使用flex布局

    <style>

      * {

        padding: 0;

        margin: 0;

      }

      .gird_Box {

        width: 100vw;

        height: 500px;

        display: flex;

      }

      .item1 {

        background-color: pink;

        flex: 1;

      }

      .line {

        background-color: palegreen;

        width: 20px;

      }

      .item3 {

        background-color: skyblue;

        flex: 1;

      }

    </style>

  </head>

  <body>

    <div class="gird_Box">

      <div class="item1">item1</div>

      <div

还在拿flex进行布局吗？快来试试grid网格布局吧的更多相关文章

  1. CSS Grid 网格布局全解析

    介绍 CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格. Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列.它还能使我们在不改变任何HTML的情况下 ...

  2. 【CSS】343- CSS Grid 网格布局入门

    CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格.Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列. 它还能使我们在不改变任何HTML的情况下,使用 ...

  3. CSS Grid网格布局全攻略

    CSS Grid网格布局全攻略 所有奇技淫巧都只在方寸之间. 几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术.从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直 ...

  4. 轻松上手CSS Grid网格布局

    今天刚好要做一个好多div格子错落组成的布局,不是田字格,不是九宫格,12个格子这样子,看起来有点复杂.关键的是笔者有点懒,要写那么多div和css真是不想下手啊.多看了两眼,这布局不跟网格挺像吗?c ...

  5. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  6. grid网格布局使用

    定义 grid布局是指对网页进行划分成一个一个网格,然后根据自己的要求,可以任意组合. 以前写类似的功能,很麻烦,需要写很多的CSS去控制,有了grid就很方便了,可以随意进行组合. 跟flex有很多 ...

  7. Grid 网格布局详解

    Grid网格布局详解: Grid布局与Flex布局有着一定的相似性,Grid布局是将容器划分成行和列,产生单元格,可以看做是二维布局. 基本概念: 采用网格布局的区域,称为"容器" ...

  8. python之tkinter使用-Grid(网格)布局管理器

    # 使用tkinter编写登录窗口 # Grid(网格)布局管理器会将控件放置到一个二维的表格里,主控件被分割为一系列的行和列 # stricky设置对齐方式,参数N/S/W/E分别表示上.下.左.右 ...

  9. CSS Grid 网格布局教程

    一.概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局.以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了. 上 ...

  10. CSS3中的display:grid网格布局介绍

    1.网格布局(grid): 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局; 2.基本概念: 容器和项目,如图所示: <div class="content&qu ...

随机推荐

  1. [硬核] Bootstrap Blazor Table 综合演示例子

    知识点: 1.导入导出 2.分页功能 3.增删改查 4.批量删除 5.批量编辑(审核) 6.列排序与列搜索 7.顶部搜索实现所有列搜索 8.高级搜索实现多条件搜索 9.顶部与刷新与视图列 10.实现文 ...

  2. youtube-dl下载太慢了，我选yt-dlp

    前言 最近过年嘛,过年前照例来下载一些贺岁歌曲,现在国内没啥人做贺岁专辑,这方面还得看马来西亚华人,他们每年都有出专辑,质量很不错! 国内平台自然是没有(或者不全的),需要在YouTube下载~ 之前 ...

  3. GPS定位解决偏差

    目录 GPS定位解决偏差 开篇 实践 1.解决思路以及步骤 2.实践出真理! 3.上坐标系之间的代码. 希望大家:点赞,留言,关注咯~ 唠家常 今日推荐都在文章中了 GPS定位解决偏差 开篇 大家都知 ...

  4. 关于计算机与常用DOS命令

    计算机 计算机 计算机由软件和硬件组成. 能够按照程序运行,自动,高速处理海量数据的现代化智能电子设备. 计算机硬件 CPU 主板 内存 电源.主机箱 硬盘 显卡 键盘.鼠标(输入设备) 显示器(输出 ...

  5. 【大型软件开发】浅谈大型Qt软件开发（四）动态链接库的宏冲突问题、COM组件开发的常见问题

    最近工作的时候有一个链接库的对接工作,在对接时发生了一些小问题,这篇FAQ是办公室写这个库的工程师戴工写的,这里记录一下: 一.编译工程时报链接错误"不允许dllimport静态数据成员的定 ...

  6. CSP-J初赛知识点

    就要初赛了,知识点还没怎么看,今天花一个小时来整理一下,希望大家在初赛中有个好成绩## 计算机常识IT : Information Technology 信息技术代别         年代       ...

  7. cv::Mat::step详解

    1.简介 step的几个类别区分: step:矩阵第一行元素的字节数 step[0]:矩阵第一行元素的字节数 step[1]:矩阵中一个元素的字节数 step1(0):矩阵中一行有几个通道数 step ...

  8. ft5426触摸屏I2C

    触摸的点数, 先写入地址0x38, 寄存器0x02, 再次读取0x38的数据,得到1个触摸点 读取全部坐标信息,需要读入30字节数据

  9. 认识Spring MVC-概念-小demo

    二:SpringMVC 异常码: 405:请求不允许 404:资源不存在 400:参数有问题 500:代码有问题 SpringMvc是Spring FrameWork提供的WEB组件,是目前的主流的实 ...

  10. B端业务中仓库标签打印系统设计方案

    需求背景: 仓库在给客户货物打包途中需要在包裹上贴标签,在客户比较多且标签样式多样化的前提下,给仓库人员带来了工作量,为了节约仓库人员工作流程时间,公司开发了一套标签管理系统: 前提条件:选择专属打印 ...