左侧固定,右侧自适应(或右侧固定,左侧自适应)布局方法
写在前面
归纳总结了几种比较ok的方法,左右布局是基本功之一,虽然现在我们基本在开发中都会使用类似antd,element,iview这些前端ui框架,这些框架已经把传统的布局样式给封装的很完美了,但是作为前端的css基础,我认为这些也是必须掌握的,而且很有可能在实际开发过程中就遇到了呢
- 方法一:左侧div浮动 右侧元素设置margin-left自适应
- 方法二:左侧div浮动,右侧元素创建BFC
- 方法三:左侧div采用绝对布局,右侧元素设置margin-left自适应
- 方法四:外层父级元素使用table布局,子元素使用table-cell
- 方法五:双float + calc计算宽度
- 方法六:flex布局
首先列出通用的css样式
通用css样式:
.mainContent {
/* 基本最外层父级元素,不需要做任何特殊处理,这里写着,只是在实际开发中,外层肯定会有一个嵌套的父级元素 */
}
.main-1::after {
/*通用css 用于清除浮动,使用浮动布局必然会涉及到清除浮动,这里我只用了最常用的方法,其余方法请读者自行搜索*/
content: "";
clear: both;
display: block;
height: 0;
}
.leftDivCommon {
/*左侧布局通用样式*/
background: gray;
w