                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

footer占用了main的位置，跑到了left和right的下面

<style?type="text/css">
body{?margin:0;?padding:0;?font-size:30px;?color:#fff}
.top{width:100%;background:purple;}
.main{width=100%;background:red;position:relative;}
.left{width:200px;background:blue;position:absolute;left:0px;}
.right{position:absolute;right:0px;margin-left:10px;background:green;}
.foot{width:100%;background:orange;}
</style>

</head>

<body>
<div?class="top">top</div>
<div?class="main">
????<div?class="right">right</div>
????<div?class="left">left</div>
</div>
<div?class="foot">foot</div>

</body>

結果是這樣子的

cc_0501

2015-10-14

源自：如何用CSS進行網頁布局 5-3

關注問題我要回答

647

操作

收起

2 回答

大寫的水
2015-10-15

你的left和right沒有設置高度，然后這里和上一節中不大一樣，上一節中使用的是浮動排版，解決footer顯示的方法有1、給main設置和left/right相同的高度；2、給main設置屬性overflow=hidden；3、給footer設置屬性clear:both；在這一節這里我們使用的是定位排版，所以只能采取給main設置和left/right相同的高度的方法解決footer顯示問題