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

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

為什么散列布局是 一定要按照 左右中的順序排列?

為什么散列布局是 一定要按照 左右中的順序排列?
在編輯時我按照左中右的順序設置div。
在瀏覽時發現右邊的div排列在了下一行的右邊 很是納悶,有沒有人可以解答的。
代碼我就不copy了 你們可以試試再來回答我的問題。

<html>

<head>

<title>THe Pages show</title>

<meta charset = "uft-8">

<style>

.style{font-size: 18px;font-family: 黑體;}

body{margin: 0;}

#left {background-color: #eee;height: 300px;width: 200px;position: absolute;left: 0;}

#mid{background-color: blue;height: 300px;width: auto;margin: 0 100px 0 200px;}

#right{background-color: yellow;height: 300px;width: 100px;position: absolute;right: 0;}

</style>

</head>

<body>

<div id = "left" class = "style">This ?is left</div>

<div id = "mid" class = "style">This is mid</div>

<div id = "right" ?class = "style">This is right</div>S

</body>

</html>

http://img1.sycdn.imooc.com//5832c1030001203409450708.jpg

<html>

<head>

<title>THe Pages show</title>

<meta charset = "uft-8">

<style>

.style{font-size: 18px;font-family: 黑體;}

body{margin: 0;}

#left {background-color: #eee;height: 300px;width: 200px;position: absolute;left: 0;}

#mid{background-color: blue;height: 300px;width: auto;margin: 0 100px 0 200px;}

#right{background-color: yellow;height: 300px;width: 100px;position: absolute;right: 0;}

</style>

</head>

<body>

<div id = "left" class = "style">This ?is left</div>

<div id = "right" ?class = "style">This is right</div>

<div id = "mid" class = "style">This is mid</div>

</body>

</html>

http://img1.sycdn.imooc.com//5832c15a0001c8da09450708.jpg

正在回答

2 回答

看看這個有沒有幫助

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

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

你還是發代碼吧,原諒我的懶。- -

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

魂魄之子 提問者

代碼已經給了 你大可去試試。
2016-11-21 回復 有任何疑惑可以回復我~
#2

stone310 回復 魂魄之子 提問者

其實道理很簡單,設置了absolute后,如果不給他top,left,right,bottom屬性,那么它就一定會呆在它原本的位置; 然后看這個例子,當左右中時,原本的位置就是右上角; 當左中右時,因為中間元素是占滿一行,因此原本的位置就是下一行的最右邊
2016-11-21 回復 有任何疑惑可以回復我~
#3

stone310 回復 stone310

因為你這里只給了right,沒有給top,我這里說的原本的位置就是只給了right:0的位置
2016-11-21 回復 有任何疑惑可以回復我~

舉報

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

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

進入課程

為什么散列布局是 一定要按照 左右中的順序排列?

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

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

幫助反饋 APP下載

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

公眾號

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