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

用position做三列布局的时候出现问题,请看下面具体的,求解答

各种测试发现,在用position做三列布局的时候,中间设置margin自适应宽度,左右两边固定宽度必须设置一样的才会得到结果,

body{ margin:0; padding:0; font-size:30px; font-weight:bold}

.left{width:200px; height:600px; background:#ccc; position:absolute;left:0; top:0}

.main{height:600px;margin:0 210px 0 210px;background:#9CF}

.right{height:600px; width:200px; position:absolute; top:0;right:0;background:#FCC;}

如果两边固定宽度值不一样的话,就会出现中间自适应部分与右边布局重叠,而与左边布局中间很大空白,求大神解答一下是什么情况,我是新手,勿喷

ICE_锦公子

2016-08-03

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

关注问题我要回答

1655

操作

收起

5 回答

白袍策马啸西风回答被采纳 +3 积分
2016-08-03

我也是新手，给你分享一下我的看法。首先你要知道元素流入页面的方式是从上到下从左到右的顺序，当你浮动或者绝对定位一个元素时，其实就是把元素从页面流中拿出来放在一个位置上。.left和.right被定位在屏幕左右两端，宽度为200px。这是他们已经被从页面流中提取出来，你可以看做页面流中只有.main，而根据浏览器的默认，.main会从左到右从上到下的流入页面，如果你不设置main的外边距或者当你设置main的外边距小于两个绝对定位元素的宽度时，main会从浏览器的最左面一直扩展到浏览器的最右面，就会造成你说的main与两侧重叠。另外还有一点要说明，正常流入页面中的块元素中包含的内联元素会包围着被浮动或者被绝对定位的元素。 ** 说远了，总的来说当你使用绝对定位或浮动元素时，一定要考虑正常流入页面的元素的外边距要大于或等于被浮动或定位元素的宽度。这样就能解决你遇到的问题了。**

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

收起回答

圆脸哥哥
2016-08-24

我也出现了这个问题请问是怎么回事啊是HTML哪里出问题了啊

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

收起回答

qq_風鈴草_03704374
2016-08-03

这个CSS语句是没有出现问题的，你是不是HTML编写的时候出现问题了……

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

收起回答

ICE_锦公子提问者

是的是的谢谢发现问题了

2016-08-03 回复有任何疑惑可以回复我~

溢彩纷橙
2016-08-03

我把你的复制过来，是没有问题的，问题应该不在这里，应该是body的问题

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

收起回答

ICE_锦公子提问者

是写HTML出了点问题嘿嘿

2016-08-03 回复有任何疑惑可以回复我~

看的见但不存在的面团
2016-08-03

你是不是中间的写错了。如果你把.right{height:600px; width:300px; position:absolute; top:0;right:0;background:#FCC;}那么.main{height:600px;margin:0 310px 0 210px;background:#9CF}这里是顺时针，你那样的情况好像是把.main{height:600px;margin:0 210px 0 310px;background:#9CF}写成这样了

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

收起回答

ICE_锦公子提问者

顺序没有错的

2016-08-03 回复有任何疑惑可以回复我~