如果把上面的问题稍微改变一下，要求展示一个左中右布局，而且左右固定，中间自适应，这要如何实现呢？

估计很多人会这样想：

css中.flexibleColumn样式添加一个属性：margin-right: 40px;

html中再追加一个固定列，在右侧浮动：

<div class="fixedColumn" style="float: right;"></div>

然后运行的效果是...左中布局，右边空白，浏览器出现滚动条，右固定列换行后右浮动了。

然后我们做一个小小的改动——把刚才添加的右浮动固定列的dom放到自适应列前面，也就是说html的dom顺序是左浮动，右浮动，自适应的顺序！html如下：

 

效果就“神奇”的实现了~

这里一个注意点就是：浮动元素在dom中要在非浮动元素的前面，否则非浮动元素后面的浮动元素会换行。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/template/m58775.shtml