关于网页中css定位的问题,困扰我很久了!初学!泪求热心网友解答,求师父!
如图,我在网页中搞了四个大div标签,想作为头部,中部左(做内容),中部右(做兴趣导航),底部.这四个div标签,例如头部,设置了position:relative,还有...
如图,我在网页中搞了四个大div标签,想作为头部,中部左(做内容),中部右(做兴趣导航),底部.
这四个div标签,例如头部,设置了position:relative,还有width和height,四个div中的小div 的position:absolute 设置了定位left,top/bottom,按理,如图中"someword"一栏我把它们设置了bottom:15px,怎么它们不是按父标签(头部)来定位,在父标签的bottom:15px这个位置?
还有interest一栏我设置了right:5px,怎么不能靠右?现在只能用left:xx定位到右边去...
很多蛋疼而且灵异问题...在线求解答和指导!qq求网页制作的师父! 展开
这四个div标签,例如头部,设置了position:relative,还有width和height,四个div中的小div 的position:absolute 设置了定位left,top/bottom,按理,如图中"someword"一栏我把它们设置了bottom:15px,怎么它们不是按父标签(头部)来定位,在父标签的bottom:15px这个位置?
还有interest一栏我设置了right:5px,怎么不能靠右?现在只能用left:xx定位到右边去...
很多蛋疼而且灵异问题...在线求解答和指导!qq求网页制作的师父! 展开
4个回答
展开全部
个人建议：如果用position来定位你的页面，父级元素的position属性必须为相对定位（relative），定位于其内部的某个元素，最好用绝对定位（absolute）,这样，它就不受父级元素的padding值的影响。
通过楼主的描述看，你的4个大<div>标签是一种并列同级的关系，并没有嵌套起来，作头部的<div>虽设置了position:relative，但我看来它并不是另外几个<div>的父级元素，所以你后面的position:absolute所对应的父级元素可能还是<body>元素。
建议新建一个<div>，让它成为你的4个大<div>标签的父级元素，并设置为position:relative，然后将其子元素设为position:absolute。
通过楼主的描述看，你的4个大<div>标签是一种并列同级的关系，并没有嵌套起来，作头部的<div>虽设置了position:relative，但我看来它并不是另外几个<div>的父级元素，所以你后面的position:absolute所对应的父级元素可能还是<body>元素。
建议新建一个<div>，让它成为你的4个大<div>标签的父级元素，并设置为position:relative，然后将其子元素设为position:absolute。
追问
曾经按你的方法做过了,可是问题依旧,例如:右边的大div标签和底部的会随着浏览器伸缩改变位置,换言之,把浏览器缩小就不堪忍睹...希望在qq上能得到详细的请教! 396202160
追答
依你思路，给段代码，供参考:
网页中css定位的问题
*{margin:0;padding:0;}
#wrapper{width:980px;height:680px;margin:0 auto;padding:40px;position:relative;background:#ccc;}/*相对定位，都以它为参照.虽设了内间距为40px,但对下面绝对定位的元素影响不了*/
#top{width:980px;height:160px;position:absolute;left:0;top:0;background:#f00;}/*绝对定位，设置left和top */
#left{width:480px;height:400px;position:absolute;left:0;top:160px;background:#0f0;}/*绝对定位，设置left和top */
#right{width:500px;height:400px;position:absolute;left:480px;top:160px;background:#00f;}/*绝对定位，设置left和top */
#bottom{width:980px;height:120px;position:absolute;left:0;top:560px;background:#ff0;}/*绝对定位，设置left和top */
头部区域
左边区域
右边区域
底部区域
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不懂 多学习
hsiu28.net/style/style_10.php
hsiu28.net/style/style_10.php
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
看你写的东西真麻烦，还是我给你写个吧，简单实现
<div style="margin-left:auto;margin-right:auto;with:960px;">
<div style="float:left;with:700px; height:200px;">左边内容区</div>
<div style="float:tight;with:260px;height:200px;">右边导航区</div>
</div>
左边宽度加右边宽度的综合最好能小于外面包含他们的宽度，小个1-5像素即可，如果左右块之间需要有缝隙，一般是10像素或7像素宽的缝隙，那就是左右宽度加在一起的和小于总宽度的10像素即可。上面写的是随意宽度高度，你根据需要自己设置吧。
<div style="margin-left:auto;margin-right:auto;with:960px;">
<div style="float:left;with:700px; height:200px;">左边内容区</div>
<div style="float:tight;with:260px;height:200px;">右边导航区</div>
</div>
左边宽度加右边宽度的综合最好能小于外面包含他们的宽度，小个1-5像素即可，如果左右块之间需要有缝隙，一般是10像素或7像素宽的缝隙，那就是左右宽度加在一起的和小于总宽度的10像素即可。上面写的是随意宽度高度，你根据需要自己设置吧。
追问
谢谢你的代码!但是我想按我的形式走..以后更新网页总不能靠你给我提供代码吧!学到的才是自己的!我想详细了解一下你上面float属性,还有with的用法和作用!
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
float::right 就可以靠右了，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
