页面常用的两栏、三栏布局方式

sherlockkid7
454 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第28天，点击查看活动详情

两栏布局

就是一个边栏，一个主栏，边栏宽度固定，主栏根据设备宽度，变宽或者变窄

image.png

<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>

1. 浮动、BFC

通过设置 overflow:hidden 触发 BFC ，BFC的区域不会与浮动元素的区域重叠

BFC（ Block Formatting Context ）即块级格式上下文，简单的说，BFC是页面上的一个隔离的独立容器，其内部元素和外部元素不会相互影响

.left{
    width: 200px
    float: left;
    background-color: blue;
}
.right{
    /* 触发BFC */
    overflow: hidden;
    background-color: pink;
}

2. Flex布局

.container{
    display: flex;
}
.left{
    width: 200px;
    background-color: blue;
}
.right{
    flex: 1;
    background-color: pink;
}

3. Grid布局

 .container {
    display: grid;
    grid-template-columns: 200px 1fr;
}
.left{
    background-color: blue;
}
.right{
    background-color: pink;
}

注： grid-template-columns指定页面分成两列。第一列的宽度是200px；第二列为1fr，即所有剩余宽度。

三栏布局

中间自适应，两边定宽

image.png

1. 圣杯布局

  • 三者都设置向左浮动
  • 设置中间部分宽度为100%;
  • 设置负边距， left设置负左边距为100%, right设置负左边距为负的自身宽度
  • 设置container的padding值给左右两个子面板留出空间
  • 设置两个子面板为相对定位，left面板的left值为负的left面板宽度，right面板的right值为负的right面板的值

但是圣杯布局有个问题：当中间面板的部分比两边的子面板宽度小的时候，布局就会乱掉。因此也就有了双飞翼布局来克服这个问题。如果不增加任何标签，想实现更完美的布局非常困难，因此双飞翼布局在主面板上选择了加一个标签

<div class="container clearfix">
    <div class="center"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

 /* 解决浮动引起的高度塌陷 */
 .clearfix::after{
    content: "";
    clear: both;
    display: block;
}
 .container{
    padding: 0 200px;
}
.center,.left,.right{
    float: left;
}
/* 中间部分宽度自适应 */
.center{
    width: 100%;
    min-height: 400px;
    background-color: #34495e;
}
.left,.right{
    width: 200px;
    min-height: 400px;
}
/* 左边栏使用margin-left移动中间部分的宽度，再使用相对定位向左移动自身的宽度 */
.left{
    margin-left: -100%;
    background-color: #2ecc71;
    position: relative;
    left:-200px;
}
.right{
    margin-left: -200px;
    background-color: #3498db;
    position: relative;
    right:-200px;
}

2. 双飞翼布局

  • left、container、right都设置左浮动
  • 设置container宽度为100%
  • 设置负边距，left设置margin-left为-100%，right设置margin-left为负的自身宽度
  • 设置center的margin值为left和right宽度，为左右两个侧栏留出空间
<div class=" clearfix">
    <div class="container">
        <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>

.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.container,.left,.right{
    float: left;
}
.container{
    width: 100%;
}

.center{
    margin: 0 200px;
    min-height: 400px; 
    background-color: #34495e; 
}
.left,.right{
    width: 200px;
    min-height:400px;
}
.left{
    margin-left: -100%;
    background-color: #2ecc71;
}
.right{
    margin-left: -200px;
    background-color: #3498db;
}

双飞翼布局与圣杯布局的主要差别在于：

  • 双飞翼布局给主面板（中间元素）添加了一个父标签,用来通过margin给子面板腾出空间
  • 圣杯布局采用的是padding,而双飞翼布局采用的margin, 解决了圣杯布局的问题
  • 双飞翼布局不用设置相对定位，以及对应的left和right值

3. Flex弹性布局

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.container{
    display: flex;
    min-height: 400px;
}
.left,.right{
    background-color: #95a5a6;
    width: 200px;
    /* flex: 0 0 200px; */ 与使用宽度能够实现同样的效果
}
.center{
    flex:1;
    background-color: #000;
}

4. Grid 布局(网格布局)

  • container 设置为display: grid
  • 设置三栏的高度grid-template-rows: 400px
  • 设置三栏的宽度，中间自适应，两边固定grid-template-columns: 100px auto 200px;

grid-template-columns属性定义每一列的列宽
grid-template-rows属性定义每一行的行高

 /* html同上Flex弹性布局*/
.container{
    display: grid;
    grid-template-rows: 400px;
    grid-template-columns: 200px auto 200px;/* 设置列宽，也可使用百分比 */
}
 .left,.right{
    background-color: #95a5a6;  
}
avatar
文章
阅读
粉丝