多栏布局方案

最新推荐文章于 2023-05-14 09:05:56 发布

璐瑶知码li

最新推荐文章于 2023-05-14 09:05:56 发布

阅读量582

点赞数

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_49464155/article/details/122570960

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. 两栏布局

两栏布局：左侧固定，右侧自适应
- 方案一：
  1. 左右两个盒子，左侧固定宽度
  2. 左侧盒子设置position:absolute
  3. 父元素设置position:relation,加padding-left:左侧盒子宽
- 方案二：
  1. 左右两个盒子，左侧固定宽度
  2. 左侧盒子设置position:absolute
  3. 父元素设置position:relation，右侧盒子加margin-left:左侧盒子宽
- 方案三：
  1. 左右两个盒子，左侧固定宽度
  2. 父元素display:flex
  3. 右侧flex:1

2. 三栏布局

三栏布局：两边固定宽，中间自适应

方案一：圣杯布局：用于解决三栏布局
1. middle、left、right加float :left,left、right加position:relative
2. 给middle width:100%占满盒子，此时middle把left、right挤到下一行，用margin-left:100%把left盒子拉到middle的左边，给right盒子margin-left:-right盒子宽，把right盒子移到middle的右侧
3. 给大盒子padding值，让把middle的内容拉回去，left和right盒子也跟着变了，再用相对定位，把left、right盒子拉回来，left:-left盒子宽，left:right盒子宽

//html结构
<div class="parent">
    <div class="middle">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>

//css
.left,.middle,.right{
    float:left
}

.left,.right{
    position:relative
}

.middle{
    width:100%;
}
.left{
    margin-left:-100%;
    left:-left盒子宽
}
.right{
    margin-left:-right盒子宽;
    left:right盒子宽
}
.parent{
    padding:0 right盒子宽 0 left盒子款;
}

方案二：双飞翼布局
1. main,left,right设置float:left
2. main width:100%,占满盒子；left、right被挤到下一行，类似圣杯布局，给left：margin-left:100%,right： margin-left:-right盒子宽
3. 给middle一个margin:0 right宽 0 left宽

<div class="box">
    <div class="main">
        <div class="middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.main,.left,.right{
    float: left;
}
.main{
    width: 100%;
}
.left{
    margin-left: -100%;
    width: 100px;
    background-color: red;
}
.right{
    width: 200px;
    margin-left: -200px;
    background-color: green;
}
.middle{
    background-color: skyblue;
    padding: 0 200px 0 100px;
    /* margin: 0 200px 0 100px; */
}

3. 等高布局

等高布局是指子元素在父元素中高度相等的布局方式。

方案一：内外边距抵消法

父元素设置overflow：hidden
子元素加padding-bottom:足够大的px，margin-bottom:-padding-bottom;
注：父元素不给高，让子元素撑开

方案二：利用内容撑开父元素的特点，给每一列加对应的容器，并进行互相嵌套（有多少列就多少容器）

左中右宽依次为30%、40%、30%，左中右添加min-height
bg2.bg3设置position:relative,移动bg2位置left:30%,左侧会露出30%的bg1元素，bg3设置left:40%,中间40%就会显示出bg2元素，左中右内容随着bg3移动
左、中利用margin-left设置把左中元素移动到指定位置，左侧值为-（左+中宽），中值为-中宽
左中右元素浮动，然后给bg3清浮动

代码示例：

.left,.middle,.right{
    min-height: 100px;
    float: left;
    width: 30%;
}
.left{
    margin-left: -70%;
}
.middle{
    margin-left: -40%;
    width: 40%;
}
.bg1{
    overflow:hidden;
    background-color: red;
}
.bg2{
    background-color: skyblue;
    position: relative;
    left: 30%;  
}
.bg3{
    background-color: green;
    position: relative;
    left: 40%;
}
.clearfix::after{
    clear: both;
    display: block;
    content: '';
}
.clearfix{
    zoom: 1;
}

<div class="box">
   <div class="bg1">
        <div class="bg2 clearfix">
            <div class="bg3 clearfix">
                <div class="left">left</div>
                <div class="middle">middle</div>
                <div class="right">right</div>
                <div></div>
            </div>
        </div>
    </div>
</div>