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

為什么right這么窄？我并沒有設置寬度啊

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:gray;}

.main{height:500px;background:red;}

.left{height:500px;width:200px;background:blue;}

.right{height:500px;background:green;float:right;position:absolute;left:210px;}

.foot{height:100px;background:orange;}

</style>

這是我的代碼，我的問題是，如果不設置width，是不是就默認占整行呢？而且我設置float：right。 ?right不應該在最右邊嗎？相當于設置了right：0。但是必須在.right{}里加right：0，就能實現了

Dream0703

2016-04-21

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

關注問題我要回答

363

操作

收起

5 回答

啊不
2016-05-06

用三列布局那個方法吧。。left用float，right用position:absolute; left:210px.right:0px;

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

收起回答

mmmmBlack
2016-05-03

<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>混合布局編程挑戰</title>
<style?type="text/css">
body{?margin:0;?padding:0;?font-size:30px;?color:#fff}
.top{height:100px;background:gray;}
.main{height:500px;background:red;}
.left{height:500px;width:200px;background:blue;}
.right{height:500px;background:green;float:right;/*position:absolute;這個去掉*/left:210px;}
.foot{height:100px;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>
</html>