如何确定包装器外部的 div 相对于包装器内部的 div 的位置？
我需要一些帮助。我要去学校学习平面设计，并正在建立一个网站作为服务贸易。
我在photoshop中设计了模板，然后将其放入PSD2CSSOnline.com，该网站吐出代码和拼接图像。
我能够对 HTML 和 CSS 进行足够的编辑，以使顶部的两条粉红色线在浏览器中延伸，但我不知道如何让底部的线也能做到同样的事情，因为不同页面上的文本会有所不同，而且我假设 div 必须位于包装器外部才能拉伸 100% 宽度，所以我的问题是如何做到这一点并仍然使其与包装器内部的 div 相关？
感谢任何帮助，我花了几个小时试图解决这个问题！
作为参考，我已上传它，以便您可以查看源代码并直观地了解我在说什么。要查看它，请转到此处：http://bellairo.com/anytime/
I need some help. I am going to school for graphic design and am building a website as a trade of services.
I designed the template in photoshop and then put it through PSD2CSSOnline.com which spat out the code and spliced images.
I was able to edit the HTML and CSS enough to get the two pink lines across the top to stretch across the browser, but I have no clue how to get the bottom ones to do the same since the text on different pages will vary and I assume the div has to be outside of the wrapper to stretch the 100% width so my problem is how to do that AND STILL MAKE IT RELATIVE to the div inside the wrapper?
Any help is appreciated, I have spent hours trying to figure this out!
For reference I have uploaded it so you can look at the source code and visually see what I am talking about. To view it go here: http://bellairo.com/anytime/
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我对 psd-css 类程序不是很熟悉，所以这有点难以理解...对于顶部的紫色线，您似乎有 2 个图像：1 是 960 x 30px Layer-13.png，然后是是 24 x 30px Layer-12-rx.png，在其下方的两个方向上无限重复。获得相同的 png 图像似乎是最简单的 - Layer-12-rx .png 在页面底部执行相同的操作 - 在已有图像下方重复此图像：Layer-7.png。
至于你关于与你的内容相关的行的问题：我注意到几乎所有的 div 都应用了position:absolute。请小心这一点，因为当应用该属性时，它会将 div 从 css 定位事物的正常流程中删除，然后您必须开始指定所有内容，而不是 div 自然地相互跟随 - 这对于诸如无论内容有多少，你的底线都会自然地位于你的内容之下。页脚行所在的 div 也有这样的位置：绝对应用于它，这意味着您始终必须准确地告诉它每个页面的位置。首先是将其更改为position:relative，然后使用left:和top:值，直到它位于正确的位置。然后它每次都应该将自己定位在文本下方。
W3 学校是很好的参考 - 有关定位信息，请查看：http://www.w3schools.com/ css/css_positioning.asp
i'm not very familiar with psd-css kinda programs so this is a bit hard to understand... for the top purple lines it seems like you have 2 images: 1 is 960 x 30px Layer-13.png, and then there is the 24 x 30px Layer-12-rx.png that repeats into infinity in both directions underneath that. It seems the simplest to get that same png image - Layer-12-rx .png to do the same thing at the bottom of your page - repeat this image underneath the one that is already there: Layer-7.png.
As far as your question about the lines being relative to your content: I notice that almost all your divs have position:absolute applied to them. Be careful of this because when that attribute is applied, it removes the div from the normal flow of how css positions things and then you have to start specifying everything, instead of divs just following upon each other naturally - which is good for things like having your bottom lines just naturally positioning themselves underneath your content, however much there is. The div in which your footer lines are sitting also has this position: absolute applied to it, which means you are always going to have to tell it exactly where to sit for every page. A start is to change it to position: relative and then play with the left: and top: values until it's in the right place. Then it should position itself underneath the text every time.
Good reference is W3 schools - for positioning info check this out: http://www.w3schools.com/css/css_positioning.asp