css - CSS对齐：水平阻塞？

Question

我正在研究一个 CMS 模板，并试图找出这是否可能。我在网上找不到任何东西，也许我只是使用了错误的关键字。

给出这个模型：

<div> #1是一个固定的“横幅”容器，左对齐。

<div> #2是另一个具有固定宽度的容器。它应该使用整个站点作为测量（比例＃2）居中，但不应与<div> #1（比例＃1）重叠。

问题：当浏览器窗口太小（例如调整大小，移动浏览器）时，容器与<div> #1. 根据它们的 z-index，其中一个在另一个之上。

方法 1：两个容器都在同一个 z-index 上。<div> #2有margin:0 auto;
，但这并不能阻止它们重叠。

方法 2：两者都有样式position: relative; float: left; z-index: 10
，但 <div> #2不再与网站中心对齐。

由于这是我正在处理的受限模板后端，因此我无法根据需要添加其他容器。我只能访问<body>网站功能的开头和开头之间的 HTML 文件部分。所以我只能添加单独<div>的 s (like <div> #1) 但不能将它们与网站的其余部分 (like <div> #2) 级联。

任何提示另一种方法表示赞赏！

score 0 · Accepted Answer

您的问题是 CSS 没有最小边距，您可以在 div2 上设置宽度为 div1 的最小边距。我记得不久前读过一篇关于这个的文章，并找到了 Ron Adair 的一个很好的解决方案：

提供更复杂解决方案的完整文章。Ron 然后评论了他获得相同结果的更简单方法：

1 回答 1