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

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

請教一個問題,關于盒子套盒子的。

<!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;}

.top{ height:100px; background:#00F;}

.main{ width:800px; height:800px; background:#F00; margin:0 auto;}

.left{ width:400px; height:400px; ?background:yellow; position: absolute; top:0px; left:0; ?}

.right{ width:200px;height:400px; background:#0F0; position: absolute; top:0; right:0;

}

.sub_main{ width:100px; height:800px; left:50px; background:#F0F; margin:0px 200px 0px 400px;

}

</style>



</head>


<body>

<div class="top"></div>

<div class="main">

<div class="left"></div>

<div class="right"></div>


<div class="sub_main"></div>

</div>

<div class="foot"></div>






</body>

</html>

為什么會是這樣,不應該是浮動在main里面的嗎?

http://img1.sycdn.imooc.com//57a8ade8000165fc18790837.jpg

正在回答

1 回答

position: absolute 的設置使left和right這兩個DIV脫離了標準文檔流,此時父元素main如果不設置定位,就以<html>為偏移參考基準。父元素設置定位,那么就會以父元素作為偏移參照基準

解決方法:父元素設置相對定位

.main{ width:800px; height:800px; background:#F00; margin:0 auto; position:relative;}

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

哇哈哈lk 提問者

原來如此 多謝了
2016-08-09 回復 有任何疑惑可以回復我~

舉報

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

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

進入課程

請教一個問題,關于盒子套盒子的。

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

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

幫助反饋 APP下載

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

公眾號

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