                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

使用position布局，div里的内容超出宽度不会自动换行！

5-3编程挑战，我使用absolute对main里面的.left,.right进行布局时（请点击打开代码） .left 不会自动增加高度， .right可以实现自动增加高度，同时.left .right 都不能实现自动换行，内容只会横行溢出，这是为什么？

ORead

2015-12-13

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

6523

操作

收起

2 回答

echo_kinchao
2015-12-13

是要超过父级宽度才会换行的

0 回复有任何疑惑可以回复我~

收起回答

qq_仓仓_0
2015-12-13

样式添加word-wrap:break-word或者word-break:break-all就OK了。因为程序把你写的那一长串字符当作一个单词了，而对于长单词的换行要用到word-wrap:break-word或者word-break:break-all这两个属性，关于这2个属性的区别请参考：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

0 回复有任何疑惑可以回复我~

收起回答

ORead 提问者

但.left还是不会自动增加高度，只有.right实现自动增加高度，这是怎么回事呢？

2015-12-13 回复有任何疑惑可以回复我~

qq_仓仓_0 回复 ORead 提问者

因为left使用了绝对定位，其高度是受父<div class="main">限制的,你可以试试把left的height:100%去掉，他就可以自动增加高度了，但是当left的高度比main的高度高时会超出main的范围，main不会随left的高度增加而增加。如果你想main随left和right的高度变化，可以试试用float布局：在main里添加overflow:auto;把left的绝对定位去掉，添加float:left;把right的margin-left:210px;改成width:210px;添加float:right就可以了

2015-12-13 回复有任何疑惑可以回复我~

qq_仓仓_0 回复 qq_仓仓_0

绝对定位是脱离文档流的，通过 top,bottom,left,right 定位。他的高度不受父DIV的高度限制，如果设置了height:100%,就继承父DIV的高度。

2015-12-13 回复有任何疑惑可以回复我~