css实现div两列布局——左侧宽度固定，右侧宽度⾃适应（两
种⽅法）
1.应⽤场景
左侧⼀个导航栏宽度固定，右侧内容根据⽤户浏览器窗⼝宽度进⾏⾃适应
2.思路
⾸先把这个问题分步解决，需要攻克以下两点：
1）让两个div并排到⼀⾏
2）让⼀个div宽度固定，另个div占据剩下宽度的空间
关于第⼀点，⾸先要明确，div属于块级元素，在⽂档标准流中单独占据⼀⾏。要想多个div在⼀⾏，就可以想办法让div脱离标准流，⽐如使⽤float或者absolute；
关于第⼆点，⾸先有⼀个宽度固定的div，另外⾃适应的div宽度是多少？⾸先这个宽度不能写“100%”，因为这⾥的100%是相对于第⼀个⾮静态祖先元素的，也就是说如果这样写，页⾯会出现整个页⾯宽度+
左边固定列宽度的情形。那么对⾃适应宽度的div处理⽅法是不去设置它的width属性，浏览器会⾃动计算后让它占⼀⾏，接下来给他设置margin-left属性把左侧固定列空间空出即可。
3.实现
1）html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="task001.css">
<meta charset="utf-8">
</head>
<body>
<!-- 左侧固定列 -->
<div class="fixedColumn"></div>
<!-- 右侧⾃适应宽度列 -->
<div class="flexibleColumn"></div>
</body>
</html>
2）css
/*左固定列*/
.fixedColumn{
width: 40px;
height: 100%;
background-color: red;
float: left;
/*position: absolute;
left: 0;*/
}
/*右⾃适应列*/
.flexibleColumn{
height: 100%;
background-color: blue;
margin-left: 40px;
}
注：
1）fixedColumn ⾥注释的⽅法即绝对定位的实现⽅式，取消注释后把float那句注释掉，可以实现相同的效果
2）使⽤float需要注意清除浮动造成⽗元素塌陷的问题（这⾥不⽤清除，因为⾃适应列和固定列⼀样⾼，在标准流中可以撑起⽗元素）4.扩展
如果把上⾯的问题稍微改变⼀下，要求展⽰⼀个左中右布局，⽽且左右固定，中间⾃适应，这要如何实现呢？
估计很多⼈会这样想：
css中.flexibleColumn样式添加⼀个属性：margin-right: 40px;
html中再追加⼀个固定列，在右侧浮动：
<div class="fixedColumn" ></div>
然后运⾏的效果是...左中布局，右边空⽩，浏览器出现滚动条，右固定列换⾏后右浮动了。
然后我们做⼀个⼩⼩的改动——把刚才添加的右浮动固定列的dom放到⾃适应列前⾯，也就是说html的dom顺序是左浮动，右浮动，⾃适应的顺序！html如下：
<!-- 左侧固定列 -->
<div class="fixedColumn"></div>
<!-- 右侧固定列 -->
css布局左边固定右边自适应<div class="fixedColumn" ></div>
<!-- 中间⾃适应宽度列 -->
<div class="flexibleColumn"></div>
效果就“神奇”的实现了~
这⾥⼀个注意点就是：浮动元素在dom中要在⾮浮动元素的前⾯，否则⾮浮动元素后⾯的浮动元素会换⾏。
具体原理待研究..⽹上好像没查到，有谁知道的话希望告知~
5.⼩结
⼀定要⾃⼰实现试试，注意只有固定列脱离了⽂档流，⾃适应列还在⽂档流中！其他没什么要说的了，但是应该还有更好的⽅法，等我看到了⼀并总结过来~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。