欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

多栏布局方案、三栏自适应布局、等高布局

程序员文章站 2022-06-26 13:26:39
一、多栏布局方案pc端多栏布局: 宽度自适应布局1、两栏自适应布局两栏自适应布局分为:左侧宽度固定,右侧宽度自适应右侧宽度固定,左侧宽度自适应左侧宽度固定,右侧宽度自适应为例,技术原理如下:左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;左侧盒子设置绝对定位给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度

一、多栏布局方案

pc端多栏布局: 宽度自适应布局

1、两栏自适应布局

两栏自适应布局分为:

  • 左侧宽度固定,右侧宽度自适应
  • 右侧宽度固定,左侧宽度自适应

左侧宽度固定,右侧宽度自适应为例,技术原理如下:

  • 左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;
  • 左侧盒子设置绝对定位
  • 给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* - 左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;
            - 左侧盒子设置绝对定位
            - 给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度 
        */
        .left {
            position: absolute;
            width: 300px;
            min-height: 200px;
            background: aqua;
        }
        .right {
            width: 100%;
            min-height: 200px;
            background-color: pink;
        }
        .right>.son {
            padding-left: 300px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">左侧盒子中的内容</div>
        <div class="right">
            <div class="son">右侧盒子中的内容</div>
        </div>
    </div>
</body>
</html>

2、三栏自适应布局

左侧盒子和右侧盒子固定宽度,让中间盒子宽度自适应

(1)圣杯布局

技术原理

  • 结构上先放中间盒子,再放左盒和右盒

  • 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置width:100%;

  • 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)

  • 将左侧盒子拉到父元素的最左边(margin-left:-100%),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度)

  • 将中间盒子的内容露出来(给三个盒子的父盒设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度)

  • 将左侧归位(微调元素位置,相对定位,left:-左侧盒子宽度)、右侧盒子归位(微调元素位置,相对定位,right:-右侧盒子宽度)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            - 结构上先放中间盒子,再放左盒和右盒
            - 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置`width:100%`;

            - 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
            - 将左侧盒子拉到父元素的最左边,将右侧盒子拉到父元素的最右边
            - 将中间盒子的内容露出来(给三个盒子的父盒设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度)
            - 将左侧归位(微调元素位置,相对定位,left:-自身宽度)、右侧盒子归位(微调元素位置,相对定位,right:-自身宽度)
         */
        .wrap {
            padding: 0 200px 0 300px;
        }
         .left {
             position: relative;
             left: -300px;
             float: left;
             width: 300px;
             min-height: 300px;
             background-color: aqua;
             margin-left: -100%;
         }
         .right {
             position: relative;
             right: -200px;
             float: left;
             width: 200px;
             min-height: 300px;
             background-color: pink;
             margin-left: -200px;
         }
         .center {
             float: left;
             width: 100%;
             min-height: 300px;
             background: yellow;

         }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="center">中间盒子的内容</div>
        <div class="left">左侧盒子的内容</div>
        <div class="right">右侧盒子的内容</div>
    </div>
</body>
</html>

(2)双飞翼布局

始于淘宝UED团队

技术原理:

  • 结构上先放中间盒子(中间盒子需要有子盒),再放左侧和右侧盒子

  • 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置width:100%;

  • 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)

  • 将左侧盒子拉到父元素的最左边(margin-left:-100%),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度

  • 将中间盒子露出来(给中间盒子的子盒设置margin:0 右侧盒子的宽度 0 左侧盒子的宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            - 结构上先放中间盒子(中间盒子需要有子盒),再放左侧和右侧盒子
            - 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置`width:100%`;

            - 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
            - 将左侧盒子拉到父元素的最左边(margin-left:-100%),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度)
            - 将中间盒子露出来(给中间盒子的子盒设置margin:0 右侧盒子的宽度 0 左侧盒子的宽度)
         */
         .clearfix::after {
             content: "";
             display: block;
             clear: both;
         }
         .clearfix {
             *zoom: 1;
         }
         .left {
             float: left;
             width: 200px;
             min-height: 200px;
             background-color: aqua;
             margin-left: -100%;
         }
         .right {
             float: left;
             width: 300px;
             min-height: 200px;
             background-color: blueviolet;
             margin-left: -300px;
         }
         .center {
             float: left;
             width: 100%;
             min-height: 200px;
             background: burlywood;
         }
         .son {
             margin: 0 300px 0 200px;
         }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="center">
            <div class="son">中间盒子的内容</div>
        </div>
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
    </div>
</body>
</html>

3、等高布局

等高:如果一列的高度变化,其他列的高度也需要跟着变化

(1)内外间距相抵消实现等高

关键点:

  • 给每一列设置padding-bottom:9999px,同时设置margin-bottom:-9999px
  • 给父元素溢出隐藏(overflow:hidden

优缺点:

  • 优点:
    • 代码简单,易于理解
    • 兼容所有浏览器
  • 缺点:
    • 实现的是伪等高,需要合理的控制内外间距的值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix::after {
             content: "";
             display: block;
             clear: both;
         }
         .clearfix {
             *zoom: 1;
         }
        .wrap {
            width: 1000px;
            /* overflow: hidden; */
        }
        .wrap div {
            float: left;
            min-height: 200px;
        }
        .left {
            width: 200px;
            background-color: lawngreen;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .center {
            width: 500px;
            background-color: lightblue;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .right {
            width: 300px;
            background-color: lightpink;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
    </style>
</head>
<body>
    <div class="wrap clearfix">
        <div class="left">左盒</div>
        <div class="center">中间盒子</div>
        <div class="right">右盒</div>
    </div>
</body>
</html>

本文地址:https://blog.csdn.net/qq_52426181/article/details/110228657

上一篇: RestTemplate使用

下一篇: wsl命令