CSS布局那些事儿,两栏三栏我全会!

今天讲一讲css中常考的两栏布局和三栏布局。

两栏布局

是什么

两栏布局是一种常见的网页布局,用于将页面内容分成左右两个部分

实现方式

看下面代码,如果我们要实现左边内容固定200px,右边占据剩下的空间。应该怎么做呢?

html 复制代码
<div class="wrap">
    <div class="left">left</div>
    <div class="right">right</div> 
 </div>

flex

css 复制代码
<style>
    .wrap{
      height: 200px;
      display: flex;
    }
    .left{
      height: 100%;
      background-color: aqua;
      flex-basis: 200px;
    }
    .right{
      height: 100%;
      background-color: bisque;
      flex: 1;
    }
  </style>

grid

css 复制代码
<style>
    .wrap{
      height: 200px;
      display: grid;
      grid-template-columns: 200px 1fr;
    }
    .left{
      height: 100%;
      background-color: aqua;
    }
    .right{
      height: 100%;
      background-color: bisque;
    }
  </style>

float + BFC || margin-left

css 复制代码
<style>
    .wrap{
      height: 200px;
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
    }
    .right{
      height: 100%;
      background-color: bisque;
      overflow: auto; // margin-left: 200px;
    }
  </style>

效果图:

三栏布局

是什么

和两栏布局一样,是一种常见的网页布局,只是将页面内容分成了左中右三部分。

实现方式

  1. flex
  2. grid
  3. 左右先加载中间后加载:float
  4. 圣杯布局:float + margin负值 + position:relative(中间内容先加载)
  5. 双飞翼布局:float + margin负值(中间内容先加载)

前三种就过多赘述了,和两栏布局一样的,这里重点讲一下圣杯布局和双飞翼布局。

圣杯布局

html 复制代码
<style>
    .wrap{
      height: 200px;
      margin: 0 200px; // 左右两边留下边距用于放左右的内容
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .right{
      height: 100%;
      width: 200px;
      background-color: bisque;
      float: right;
      position: relative;
      left: 200px;
      margin-left: -100%;
    }
    .content{
      height: 100%;
      width: 100%;
      background-color: rgb(15, 186, 55);
      float: left;
    }
    
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div> 
  </div>
</body>

双飞翼布局

html 复制代码
<style>
    .wrap{
      height: 200px;
    }
    .left{
      height: 100%;
      width: 200px;
      background-color: aqua;
      float: left;
      margin-left: -100%;
    }
    .right{
      height: 100%;
      width: 200px;
      background-color: bisque;
      float: right;
      margin-left: -100%;
    }
    .container{
      height: 100%;
      width: 100%;
      background-color: rgb(15, 186, 55);
      padding: 0 200px;
      box-sizing: border-box;
      float: left;
    }
    
  </style>
</head>
<body>
  <div class="wrap">
    <div class="container">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div> 
  </div>
</body>

效果图

假如您也和我一样,在准备春招。欢迎加我微信shunwuyu,这里有几十位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!

相关推荐
阿芯爱编程4 小时前
2025前端面试题
前端·面试
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13135 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
倔强青铜三5 小时前
苦练Python第18天:Python异常处理锦囊
人工智能·python·面试
菜包eo5 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
倔强青铜三6 小时前
苦练Python第17天:你必须掌握的Python内置函数
人工智能·python·面试
烛阴6 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君016 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7897 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼7 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript