Skip to main content

常见面试题之左边固定，右边自适应布局(四种方法：负边距、flex)

左 position:absolute, 右 margin-left 入门写法​

<div class="parent">
    <div class="l-child">左边固定1 左边固定2 左边固定3</div>
    <div class="r-child">右边自适应1 右边自适应2 右边自适应3</div>
</div>
//父元素相对定位，作为子元素绝对定位的参考
.parent {
    position: relative;
    background: #ddd;
}
.l-child {
    position: absolute;
    width: 100px;
    background: #bbb;
}
.r-child {
    margin-left: 100px;
    background: #999;
}

demo 展示

左边 float，触发父元素宽度计算 入门写法​

html 结构同上

.parent {
    background: #ddd;
    overflow: hidden;
}
.l-child {
    float: left;
    width: 100px;
    background: #bbb;
    z-index: 10000;
}
.r-child {
    margin-left: 100px;
    background: #999;
}

demo 展示

左右 float，右边使用负边距 奇伎淫巧​

这个技能要这样 get：

  1. 父元素清除浮动

  2. A 元素宽 100% 不变，margin-left:-100px 后，外部的文档流认为以边框为界，A 减少了 100px，而 A 是右浮动，也就是左边开始有 100px 空白可填充的文档流空间；

  3. 子元素 A1 是认为父元素大小没有变化，margin-left:100px 后，正好等于父元素在外部空出来的文档流空间。

  4. B 元素左浮动，且是后面的 dom 节点，正好占据并且覆盖 A 空出来的空间

<div class="parent">
    <div class="r-box">
        <div class="r-content">
            右边自适应1 右边自适应2 右边自适应3
        </div>
    </div>
    <div class="l-box">
        左边固定1 左边固定2 左边固定3
    </div>
</div>
.parent {
    background: #ddd;
    overflow: hidden;
}
.l-box {
    float: left;
    width: 100px;
    background: #bbb;
}
.r-box {
    float: right;
    width: 100%;
    margin-left: -100px;
    background: #999;
}
.r-content {
    margin-left: 100px;
}

demo 展示

flex 布局 高大尚​

父元素 flex 布局后，子元素默认就是弹性布局，除非你确定子元素的弹性方式

ps：这个方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！！

html 同第一个 demo

.parent {
    display: flex;
    background: #ddd;
}
.l-child {
    flex: 0 0 100px;
    background: #bbb;
}
.r-child {
    background: #999;
}

demo 展示

box-sizing 的怪异模式​

此外还可以用 box-sizing 的怪异模式来解决

html 同第一个 demo

.parent {
    box-sizing: border-box;
    padding-left: 100px;
    position: relative;
}
.l-child {
    position: absolute;
    left: 0;
    width: 100px;
    background: #666;
}
.r-child {
    background: #999;
}

demo 展示

本文代码和解释来自于思否编程