亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

為什么right這里在css設置中float:right就不能實現自適應了,像我這樣的不知道哪里錯了

<!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{background:grey;height:200px;}

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

.left{position:absolute;left:0;top:200px;height:600px;width:200px;background:blue;}

.right{float:right;background:green;height:600px;margin-left:300px;width:100%;}

.foot{height:200px;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>


正在回答

2 回答

.right不要去設置浮動了;用margin去自適應;

你的代碼:

.right{float:right;background:green;height:600px;margin-left:300px;width:100%;}

修改后的代碼:

.right{
????margin:0?0?0?210px;
????height:600px;
????background-color:#546aaa;
}

效果圖:

http://img1.sycdn.imooc.com//56de7ed90001d14a18740927.jpg

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

錯了 你把.right中float浮動改為left 就可以了!

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

余生4 提問者

不能right嗎?為什么
2016-03-05 回復 有任何疑惑可以回復我~
#2

編號20159527 回復 余生4 提問者

因為.left定義為了絕對定位 他脫離了標準文本流,不會影響后面的元素。。。你也可以在前面的div中假如一個width的具體值試試 我不確定
2016-03-05 回復 有任何疑惑可以回復我~
#3

qq_苔上雪_04205930 回復 余生4 提問者

這個問題 我也發現了,你弄懂了嗎,為什么不能用float:right,
2016-11-07 回復 有任何疑惑可以回復我~
#4

emily973 回復 qq_苔上雪_04205930

樓上就是正解!因為.left定義為了絕對定位 他脫離了標準文本流,所以當.right的width設為100%就占據了整個層,而.left只是覆蓋在它上面。要float:right也可以,但是要設置一個寬度值,但是就不能自適應了。
2017-02-19 回復 有任何疑惑可以回復我~
查看1條回復

舉報

0/150
提交
取消
如何用CSS進行網頁布局
  • 參與學習       209565    人
  • 解答問題       1206    個

用最簡潔的案例教你布局的那些知識,這是前端工程師基本技能

進入課程

為什么right這里在css設置中float:right就不能實現自適應了,像我這樣的不知道哪里錯了

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號