前端面试重点之——多列布局

叫我叮当

在页面开发中,当我们拿到设计师给出的UI图后,首先考虑的就是布局问题,而多列布局会是我们碰到最多的布局问题,个人就汇总了开发中常见多列布局问题的解决方法。按列数可以分为两列布局,三列布局,多列布局,其中布局方法中的原理都有类似之处。

目录

一、定宽+自适应两列布局

二、两列定宽,一列自适应布局

三、左边不定宽,右边自适应布局

四、多列不定宽,一列自适应

五、等宽布局解决方案

六、等高布局解决方案

(文中Css代码中颜色需自行添加)

一、定宽+自适应两列布局

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p></div>
</div>
  • 需求:实现左侧100px,右侧自适应,且间距20px

image-20190623235624776.png

方法一:左侧浮动,右侧宽度通过margin调整
.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px; //相差的20px是左右之间的间距
}
方法二:左侧浮动,右侧BFC
.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
方法三:table

单元格默认会等宽,但是table-layout: fixed能够让table元素布局优先,。

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 100px;
    padding-right: 20px;
}
方法四:flex
.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1
}
方法五:css3 calc()计算属性
.left {
    display: inline-block;
    width: 100px;
    margin-right: 20px;
}
.right {
    display: inline-block;
    width: calc(100% - 120px);
}

二、两列定宽,一列自适应布局

多列布局用到的属性原理基本都一样,上面的方法也同样适用于此。

<div class="parent">
   <div class="left"><p>left</p></div>
   <div class="center"><p>center</p></div>
   <div class="right"><p>right</p></div>
</div>

image-20190623235324720.png

  • 需求1:left和center定宽100px,right自适应。
  • 需求2:left和right定宽100px,center自适应。

需求1使用的方法跟上面有相同之处,不做赘述。重点以需求2为例说明。

方法一:父元素相对布局,子元素绝对布局
.parent {
    position: relative;
}
.left{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100px;
}
.right {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
}
.center {
    margin: 0 120px;
}
方法二:flex布局
.parent {
    display: flex;
}
.left, .right {
    width: 100px;
}
.left {
    margin-right: 20px;
}
.right {
    margin-left: 20px;
}
.center {
    flex: 1;
}
方法三:双飞翼布局

双飞翼布局需要将center块提前,并且需要在center的内嵌包裹块,方便设置间距,注意在设置center宽度为100%的时候,要将center的盒模型转换为IE盒模型,这样它的宽度就包含了padding。

<div class="parent">
    <div class="center">
        <div class="content">
            <p>center</p>
        </div>
    </div>
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p></div>
</div>
.center, .left, .right {
    float: left;
}
.left {
    width: 100px;
    margin-left: -100%;
}
.right {
    width: 100px;
    margin-left: -100px;
}
.center {
    box-sizing: border-box;
    width: 100%;
    padding-left: 120px;
    padding-right: 120px;
}
.content {
    height: 100%;
}

三、左边不定宽,右边自适应布局

<div class="parent">
   <div class="left"><p>left</p></div>
   <div class="right"><p>right</p></div>
</div>

image-20190624233637505.png

  • 需求:左侧不定宽,右侧自适应,间距20px。
方法一:float + overflow
.left {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
方法二:table布局

由内容决定宽度,不由布局决定宽度,取消table-layout:fixed的作用

.parent {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 0.1% //取最小宽度,实际宽度由内容决定
    padding-right: 20px;
}
方法三:flex
.parent {
    diaplay: flex;
}
.left {
    margin-right: 20px;
}
.right {
    flex: 1;
}

四、多列不定宽,一列自适应

三、左边不定宽,右边自适应布局 方法相同。

五、等宽布局解决方案

<div class="parent">
    <div class="column"><p>column1</p></div>
    <div class="column"><p>column2</p></div>
    <div class="column"><p>column3</p></div>
    <div class="column"><p>column4</p></div>
</div>

image-20190624235549824.png

  • 需求:多列等宽,并保留20px间距。
方法一:margin + float

此时需要考虑多个间距的问题,缺点:需要提前知道有多少列计算好每列宽度占比+间距,具体就是让父元素多拥有20px的宽度。

.parent {
    margin-left: -20px;
}
.column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
}
方法二:table

此时需要在parent元素外层再添加一层盒子parent-layout,并设置宽度使得宽度再增加20px。

<div class="parent-layout">
    <div class="parent">
        <div class="column"><p>column1</p></div>
        <div class="column"><p>column2</p></div>
        <div class="column"><p>column3</p></div>
        <div class="column"><p>column4</p></div>
    </div>
</div>
.parent-layout {
    margin-left: -20px;
}
.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.column {
    display: table-cell;
    padding-left: 20px;
}

方法三:flex

.parent {
    display: flex;
}
.column {
    flex: 1;
}
.column + .column {
    margin-left: 20px;
}

六、等高布局解决方案

除了解决分栏的问题之外,我们同时需要解决分列后等高布局的解决方法:

方法一:table

利用table单元格本身具有等高特性

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right  {
    display: table-cell;
}
.left {
    widht: 100px;
    border-right: 20px solid transparent;
    background-clip: padding-box; //由于是border-box,需要把背景颜色去掉
}
方法二:flex
.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}
方法三:float

伪等高

.left, .right  {
    flex: left;
    width: 100%;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}
.left, .right {
    padding-bottom:9999px;
    margin-bottom: -9999px;
}
.parent {
    overflow: hidden;
}

(文中样式代码中的背景颜色可自行添加)

说明:

  1. BFC(块级格式上下文),可以实现和浮动元素共存,且不会遮挡浮动元素,通过overflow:hidden,
    作用:避免边距折叠,不被浮动元素遮盖。且BFC能够将内容元素浮动清除,避免高度塌陷。

喜欢那就点个赞吧😝

(完)

阅读 448

Keep learning and love.

10 声望
0 粉丝
0 条评论
你知道吗?

Keep learning and love.

10 声望
0 粉丝
宣传栏