jsp多个div换行css实现div两列结构两种办法

左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应

二、思路

首先把这个问题分步办理，须要占领以下两点：

jsp多个div换行css实现div两列结构两种办法 Python

1、让两个div并排到一行

2、让一个div宽度固定，另个div霸占剩下宽度的空间

关于第一点，首先要明确，div属于块级元素，在文档标准流中单独霸占一行。
要想多个div在一行，就可以想办法让div分开标准流，比如利用float或者absolute；

关于第二点，首先有一个宽度固定的div，其余自适应的div宽度是多少？首先这个宽度不能写“100%”，由于这里的100%是相对付第一个非静态先人元素的，也便是说如果这样写，页面会涌现全体页面宽度+左边固定列宽度的环境。
那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动打算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。

三、实现

1、html

2、css

注：

1、fixedColumn 里注释的方法即绝对定位的实现办法，取消注释后把float那句注释掉，可以实现相同的效果

2、利用float须要把稳打消浮动造成父元素塌陷的问题（这里不用打消，由于自适应列和固定列一样高，在标准流中可以撑起父元素）

四、扩展

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

估计很多人会这样想：

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

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

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

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

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

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

详细事理待研究..网上彷佛没查到，有谁知道的话希望奉告~

总结：一定要自己实现试试，把稳只有固定列分开了文档流，自适应列还在文档流中！
其他没什么要说的了，但是该当还有更好的方法，等我看到了一并总结过来~

想要学习更多的编程技能，不如选择重庆IT培训，千锋重庆100%面授式课程，谢绝视频同步授课，谢绝双元视频班传授教化，谢绝直播授课，西席一对一辅导学员做项目，全新打造“主流技能+前沿技能+企业级联动”传授教化课程，重新优化和定义编程措辞，采取最新版本技能开展传授教化，致力于为学员打造最牛的、最新的技能，助力学员拿下BAT级企业Offer。

千锋重庆IT技能开拓培训，让你在同样的起跑线，跑出不一样的高度。