实现左侧固定宽度, 右侧自适应的两栏布局常见方法

两栏布局方案

实现左侧固定, 右侧自适应的布局方案, 常见的几种, 写了一个各个方案实现效果的Demo, 可以通过这里查看: 预览

首先统一html结构

<div class="container"><div class="left"><p>这是左边的盒子</p></div><div class="right"><p>这是右边的盒子</p></div>
</div>
复制代码

然后统一样式, 左侧固定宽度

.container {padding: 10px;border: 1px dashed #dedede;
}.left {width: 120px;border: 2px solid #2DB3E4;
}.right {border: 2px solid #F37EC1;
}
复制代码

1. 双float方案

利用CSS的calc()函数来计算右侧宽度值, 需要清除父容器的浮动

设置box-sizing: border-box;是为了方便计算

.container::after {content: "";display: block;clear: both;
}.left, .right {box-sizing: border-box;float: left;
}.right {width: calc(100% - 120px);
}
复制代码

2. float + margin-left方案

block的元素盒子的宽度具有填满父容器，并随着父容器的宽度自适应的流动特性。

并且 block元素和浮动元素并排时, block元素会忽视浮动元素

因此给左侧盒子浮动, 右侧设置margin-left保持距离即可

.container::after {content: "";display: block;clear: both;
}.left {box-sizing: border-box;float: left;
}.right {margin-left: 120px;
}
复制代码

3. absolute + margin-left

与方案2原理大致相同, absolute也是会脱离文档流

不用清除浮动, 但也带来了新的问题

父容器需要改变position
如果左侧盒子比右侧盒子高度, 那么左侧盒子会超出父容器高度

.left {box-sizing: border-box;position: absolute;
}.right {margin-left: 120px;
}
复制代码

4. float + BFC 方法

这种方法不用计算宽度, 原理是BFC可以阻止元素被浮动元素覆盖

.container::after {content: "";display: block;clear: both;
}.left {float: left;
}.right {margin-left: 0;overflow: auto;
}
复制代码

父容器需要清除浮动, 右侧盒子设置了overflow: auto;形成了BFC

5. flex方案

flex可以说是最好的方案了

直接给右侧盒子设置flex: 1, 即可自动填满宽度

.container {display: flex;
}.right {flex: 1
}
复制代码

转载于:https://juejin.im/post/5c7548e2518825620b45303f

实现左侧固定宽度, 右侧自适应的两栏布局常见方法相关推荐

CSS 实现左侧固定，右侧自适应两栏布局的方法
"左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...
html 左边固定右边自动,七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
七种实现左侧固定，右侧自适应两栏布局的方法
总结一下左边固定,右边自适应的两栏布局的七种方法.其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点.关于 ...
通过宽高自适应设计两栏布局和三栏布局
1.两栏布局我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用第一种方法:(1)给 ...
css布局右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
flex实现水平居中和两栏布局
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
前端布局写法原理理解与总结+记忆（两栏布局、圣杯布局、双飞翼布局）
实现两栏布局 (左边固定,右边自适应,文档结构是一个父div包裹两个左右div,子元素height设置百分百自动撑满父元素) <div class="outer">&l ...
后端开发工程师的DIV+CSS两栏布局入门
padding 导致 width 扩大如果对一个元素同时指定了 width 和 padding, 那么它实际的宽度是 padding-left + padding-right + width, 所以 ...