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

right與left可以用float實現嗎

mainer里的left和right可以用浮動實現布局嗎，可以的話代碼是怎么樣的

申請You專利

2016-11-12

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

關注問題我要回答

941

操作

收起

1 回答

苦瓜ts 回答被采納 +3 積分
2016-11-12

規定要要求右側（right）先加載，左側（left）后加載，所以想用float可以改動html結構。

left設置往左浮動（width規定為200px）；
right不用浮動，margin-left設置大于200px，這樣就做到類似布局。

具體代碼如下：

<!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{width:100%;height:50px;background:#345;}
.main{width:100%;background:red;}
.left{width:200px;height:100px;background:yellow;float:left;}
.right{height:110px;background:blue;margin-left:210px;}
.foot{width:100%;height:150px;background:#345;}
</style>

</head>

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

</body>
</html>

思路有點像三欄布局中的那種特殊布局。用margin來限制容器邊界，達到寬度自適應的目的。