如何用css進行網頁布局5-3
.top{height:100px;background:#ccc;} .main{height:800px;} .left{ width:200px;height:800px;float:left;background:blue;} .right{height:800px;background:green;float:right;} .foot{heigh:50px;clear:both;background:orange;}哪里錯了,為什么left與right之間有一道鴻溝?
2017-01-11
因為你使用的是浮動模型,并且沒有設置width,因此right的那邊width由你字符的長度決定,你試試看把html里的right換成其他字符就知道啦。
2017-01-11
另外 ?foot{heigh:50px; ?里面的高度屬性少了一個t
2017-01-11
因為你右邊的div變成了浮動之后div的類型變成了inline-block,所以在你沒有設置.right寬度的情況下中間會有很大的空白。建議寬度改成百分比的形式,這樣適應性高一點。
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.main{background-color:red;height:800px;}
.top{height:100px;background:#ccc;}?
.left{ width:20%;height:800px;float:left;background:blue;}?
.right{width:79%;height:800px;background:green;float:right}?
.foot{height:50px;clear:both;background:orange;}
</style>