CSS两列布局的多种方式

html-css019

CSS两列布局的多种方式,第1张

两列布局（一侧固定宽度，一侧自适应），在工作中应该是经常使用到，可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计，同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式，欢迎大家补充。

修改 css 就可实现 位置调换 ，如下：

优点 ： 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div>顺序 ，实现主要内容优先加载渲染。

缺点 ：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。

也支持位置调换：

缺点 ：不能实现主要内容优先加载渲染。

位置调换：

这里有一点需要注意： .sidebar 没有设置高度，会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的，也就是和 .main 高度一样。

位置调换：

这里 .main 和 .sidebar 高度不单独设置的话，也是同样的高度。

位置调换：

位置调换：

这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响，只要能让 .main 成为 BFC 就行。

此外留给大家一个思考题，还有没有其他方式呢？

你要留在中间的给他加个css样式

样式就用.BD表示

就写

.BD{margin:0px

autowidth:400pxheight:300px}

然后给你的右边那个弄个绝对定位

.Bd{position:absoluteright:0pxtop:0px}

把这两个样式弄进去就ok了

右边漂浮的东西

你设置的总宽度是470

side

宽度是120

文字是从左向右

main行

宽度350

margin-left的意思是

从盒子左侧空出120px

再从左向右排列

把margin-left和参数值去掉

两行width参数相同即可

如果width参数不相同会导致脑袋大身子小

或者都加上margin-left

参数相同

也可显示居中