CSS中两栏布局的实现

本文主要是介绍CSS中两栏布局的实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一般两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应，两栏布局的具体实现：

• 利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。

.outer {height: 100px;
}
.left {float: left;width: 200px;background: tomato;
}
.right {margin-left: 200px;width: auto;background: gold;
}

• 利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。

.left{width: 100px;height: 200px;background: red;float: left;}.right{height: 300px;background: blue;overflow: hidden;}

• 利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。

.outer {display: flex;height: 100px;
}
.left {width: 200px;background: tomato;
}
.right {flex: 1;background: gold;
}

• 利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。

.outer {position: relative;height: 100px;
}
.left {position: absolute;width: 200px;height: 100px;background: tomato;
}
.right {margin-left: 200px;background: gold;
}

• 利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。

.outer {position: relative;height: 100px;
}
.left {width: 200px;background: tomato;
}
.right {position: absolute;top: 0;right: 0;bottom: 0;left: 200px;background: gold;
}

这篇关于CSS中两栏布局的实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---