本文主要是介绍前端面试之轻松实现CSS两栏布局的几种方式(实践有效），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这里实现得两栏布局是左边部分的宽度固定，右边部分的宽度自适应
其效果就如下图，在浏览器屏幕大小变化的过程中，左边块的大小是不变的，右边块的宽度是自适应的。
实现方法有以下几种：
1通过设置浮动实现。需要两个div实现，一个div设置浮动，并设置宽度，另一个div不用设置任何东西
如果要给右边块设置什么的话下面两种方法也行：
- (left左浮动并设置宽度right设置margin-left为left的宽度也能实现）
- (left设置左浮动并和宽度right，right设置over-flow:hidden也能实现）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>两栏布局——float</title><style>div{height:300px;}.left{width:200px;background-color:gray;float:left;}.main{background-color:pink;/* margin-left:200px; *//* 或者overflow:hidden; */}</style>
</head>
<body><div class = 'left'></div&g这篇关于前端面试之轻松实现CSS两栏布局的几种方式(实践有效）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
