为了账号安全,请及时绑定邮箱和手机立即绑定

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

为什么散列布局是 一定要按照 左右中的顺序排列?
在编辑时我按照左中右的顺序设置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进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

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

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信