課程
/前端開發
/HTML/CSS
/如何用CSS進行網頁布局
想問的在截圖里面的注釋。
2016-05-22
源自：如何用CSS進行網頁布局 5-3
正在回答
你代碼里面有幾個點：
題目里面要求頂部和底部寬度自適應，所以width:100%;這個可以不用寫，瀏覽器默認就是width:100%;
你在.right里面設置的這個margin-left：210px；是因為你給它設置了float：right；再margin-left自然看不出效果
你在右邊模塊里面輸入字母確實會溢出，如果輸入漢字的話則會把模塊撐大，這是由于瀏覽器默認的換行屬性導致的，你可以在右邊模塊的css中加上屬性word-break：break-all；再試試
下面是我寫的，可能也有不對的地方，不過剛好你提的兩個問題都可以解決，你可以參考一下哈：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<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:#ccc;}
.main{height:500px;background:red;}
.left{width:200px;height:500px;margin-right:-210px;background:blue;float:left;}
.right{height:500px;background:#9acc99;margin-left:210px;float: right;word-break:break-all;}
.foot{height:100px;background:#FF6634;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
? ? <div class="right">rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightvvrighthhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
? ? <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
Happy_learning 提問者
浮動好像沒法解決自適應問題吧
對不起 我也是新手 看了視頻只會用定位
舉報
用最簡潔的案例教你布局的那些知識，這是前端工程師基本技能
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-05-25
你代碼里面有幾個點：
題目里面要求頂部和底部寬度自適應，所以width:100%;這個可以不用寫，瀏覽器默認就是width:100%;
你在.right里面設置的這個margin-left：210px；是因為你給它設置了float：right；再margin-left自然看不出效果
你在右邊模塊里面輸入字母確實會溢出，如果輸入漢字的話則會把模塊撐大，這是由于瀏覽器默認的換行屬性導致的，你可以在右邊模塊的css中加上屬性word-break：break-all；再試試
下面是我寫的，可能也有不對的地方，不過剛好你提的兩個問題都可以解決，你可以參考一下哈：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<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:#ccc;}
.main{height:500px;background:red;}
.left{width:200px;height:500px;margin-right:-210px;background:blue;float:left;}
.right{height:500px;background:#9acc99;margin-left:210px;float: right;word-break:break-all;}
.foot{height:100px;background:#FF6634;clear:both;}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
? ? <div class="right">rightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightrightvvrighthhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</div>
? ? <div class="left">left</div>
</div>
<div class="foot">foot</div>
</body>
</html>
2016-05-23
浮動好像沒法解決自適應問題吧
對不起 我也是新手 看了視頻只會用定位