CSS对齐：水平阻塞？
我正在开发 CMS 模板，并尝试找出这是否可行。我在网上找不到任何东西，也许我只是使用了错误的关键字。
给出此模型：
http://img833.imageshack.us/img833/4979/alignmentmockup。 jpg
; #1 是左对齐的固定“横幅”容器。<代码>
重叠。 #1（尺度#1）。问题：当浏览器窗口太小时（例如调整大小、移动浏览器），容器与
重叠。 #1。根据它们的 z 索引，其中一个位于另一个之上。方法 1：两个容器位于相同的 z-index 上。 <代码>
margin:0 auto;但是这并不能阻止它们重叠。
方法 2：两者都采用 position:relative 样式；浮动：向左； z 索引：10
但是
; #2不再与网站中心对齐。由于这是我正在开发的受限制的模板后端，因此我无法根据需要添加其他容器。我只能访问 HTML 文件中位于 和网站功能开头之间的部分。因此，我只能添加单独的
#1），但不能将它们与网站的其余部分级联（如 < ;div>#2）。任何有关另一种方法的提示表示赞赏！
I am working on a CMS template and try to find out if this is possible at all. I was not able to find anything on the net, maybe I just used the wrong keywords.
Have this model given:
http://img833.imageshack.us/img833/4979/alignmentmockup.jpg
<div> #1 is a fixed 'banner' container aligned left.
<div> #2 is a another container with a fixed width. It is supposed to be centered using the whole site as measurement (scale #2) but shall not overlap with <div> #1 (scale #1).
Problem: when the browser window is too small (e.g. resized, mobile browser), the container overlaps with the <div> #1. Depending on their z-index, one of them is on top of the other.
Approach 1: Both container on the same z-index. <div> #2 has margin:0 auto;
but that does not stop them from overlapping.
Approach 2: Both styled position: relative; float: left; z-index: 10
but <div> #2does not align to the websites center anymore.
Since this is a resticted template back end I am working on, I cannot add additional containers as I want. I only have access to the portion of the HTML-file right between the <body> and the beginning of the websites functions. So I can only add separate <div>s (like <div> #1) but cannot cascade them with the rest of the website (like <div> #2).
Any hint for another approach appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你的问题是CSS没有最小边距，你可以在div2上设置div1的宽度。我记得不久前读过一篇关于此问题的文章，并找到了 Ron Adair 的一个很好的解决方案：
http: //www.iamron.com/downloads/min-padding.html
完整的文章，其中介绍了更复杂的解决方案。然后罗恩评论了他获得相同结果的更简单方法：
http://buildinternet .com/2009/10/purely-css-faking-minimum-margins
Your problem is that CSS doesn't have min-margin that you could set on div2 with the width of div1. I remember reading an article about this not long ago and found a good solution by Ron Adair:
http://www.iamron.com/downloads/min-padding.html
The full article in which a more complex solution is presented. Ron then comments his easier way to get the same result:
http://buildinternet.com/2009/10/purely-css-faking-minimum-margins