论坛 › Web密训营 › 5大不传CSS“三栏布局”心法

不二如是 发表于 2020-5-28 15:11:40

5大不传CSS“三栏布局”心法

本帖最后由 不二如是 于 2020-5-28 18:02 编辑

之前陆续有写过：



本讲是升华，不废话，直接上知识点。

要想实现三栏布局（左右固定宽，中间自适应），最常用的就是如下方法：


[*]float+margin
[*]position（绝对布局）
[*]flex（弹性盒子布局）
[*]table(表格布局)
[*]Grid(网格布局)

咱们官方的课程暂时还没更到这些，B 站有翻译视频，大家可以按需学习：


传送门

进入正题。

基础代码：

**** Hidden Message *****
后续只会添加元素和 CSS 样式。


float+margin

html：

<div class="container">
      <div class="left">Left</div>
      <!-- 右栏部分要写在中间内容之前 -->
      <div class="right">Right</div>
      <div class="main">Main</div>
    </div>
样式：

body,
      html,
      .containerl {
            height: 100%;
            padding: 0;
            margin: 0;
      }
      /*左边栏左浮动*/
      
      .left {
            color: azure;
            float: left;
            height: 100%;
            width: 200px;
            background: #333;
      }
      /*中间栏自适应*/
      
      .main {
            height: 100%;
            margin: 0 200px;
            background: red;
      }
      /*右边栏右浮动*/
      
      .right {
            color: azure;
            float: right;
            height: 100%;
            width: 200px;
            background: #333;
      }
效果：



优点：

快捷、简单、兼容性较好

缺点：
有局限性、脱离文档流、需要清除浮动

position（绝对布局）

html：

<div class="container">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
    </div>
样式：

body,
      html,
      .container {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
      }
      /*左右进行绝对定位*/
      
      .left,
      .right {
            color: azure;
            position: absolute;
            height: 100%;
            top: 0;
            background: #333;
      }
      
      .left {
            left: 0;
            width: 200px;
      }
      
      .right {
            right: 0;
            width: 200px;
      }
      /*中间用margin空出左右元素所占的空间*/
      
      .main {
            height: 100%;
            margin: 0 200px;
            background: red;
      }
      /*或者中间也进行绝对定位*/
      
      .main {
            position: absolute;
            height: 100%;
            left: 200px;
            right: 200px;
            background: red;
      }
样式：



优点：

简单粗暴
缺点:

脱离文档流、高度未知会出现问题、可用性差

flex（弹性盒子布局）

html：

<div class="container">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
    </div>
样式：

body,
      html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
      }
      
      .container {
            display: table;
            width: 100%;
      }
      
      .container>div {
            display: table-cell;
      }
      
      .left {
            color: azure;
            width: 200px;
            background: red;
      }
      
      .main {
            background: blue;
      }
      
      .right {
            color: azure;
            width: 200px;
            background: red;
      }
效果：



优点：

兼容性很好（ie8 及以上）、父元素高度会被子元素撑开、不担心高度塌陷
缺点:

seo 不友好、当其中一个单元格高度超出的时候，其他的单元格也是会跟着一起变高的

Grid(网格布局)

<div class="container">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
    </div>
样式：

body,
      html {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
      }
      
      .container {
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            /*设置行高*/
            grid-template-columns: 200px auto 200px;
            /*设置列数属性*/
      }
      
      .left {
            color: azure;
            background: red;
      }
      
      .main {
            background: blue;
      }
      
      .right {
            color: azure;
            background: red;
      }
效果：



优点：

简单强大、解决二维布局问题
缺点:

不兼容 ie9 及以下



如果喜欢，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列HTML帖子，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_278:} ）

tjuwlb 发表于 2020-6-6 10:32:04

学习

326222539 发表于 2020-6-12 11:14:02

迷途的羔羊来看看

_2_ 发表于 2020-6-12 12:41:31

来啦

Dawenxi9527 发表于 2020-6-14 09:24:16

。

tg123 发表于 2020-6-22 19:38:00

{:5_90:}

liuzhengyuan 发表于 2020-7-8 20:02:28

{:10_249:}        {:10_269:}        {:10_257:}        {:10_254:}
{:10_256:}        {:10_266:}        {:10_250:}        {:10_281:}
{:10_245:}        {:10_261:}        {:10_279:}        {:10_258:}
{:10_280:}        {:10_251:}        {:10_260:}        {:10_247:}

wu道一 发表于 2020-7-29 13:14:54

1

woaixuexi100 发表于 2020-7-30 14:18:59

{:5_90:}

hx.123 发表于 2020-9-9 09:24:09

学习

dys376820508 发表于 2021-3-6 15:23:13

学习中

肖迪和 发表于 2021-4-7 19:54:20

nnn

Rydia 发表于 2021-4-24 18:15:01

helloworld

ironman2021 发表于 2021-4-29 17:34:10

.

技术的小白 发表于 2021-5-20 14:12:20

来学习

287187056 发表于 2021-6-10 14:36:04

253n 发表于 2021-6-15 22:19:38

学习

一笙彤 发表于 2021-6-16 16:58:52

1

查看完整版本: 5大不传CSS“三栏布局”心法