我正在尝试创建 2 个固定位置的侧横幅(左侧和右侧),以及一个居中的内容容器。
问题是当最小化屏幕时,2 个侧面横幅覆盖了居中的容器。我需要一个 CSS 解决方案来将 View 的最小宽度设置为 860px;之后,窗口变为可滚动且 div 不重叠。完美的解决方案是:
我使用的 HTML 是这样的:
<div class="left" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; left:0px; width:180px;">
</div>
<div class="center" style="margin:100px 180px 0 180px;">
<div style="width:100%;">
<div style="width:500px; margin:0 auto;">
</div>
</div>
</div>
<div class="right" style="position:fixed; height:100%; background-color:#7fb4dd; top:43px; right:0px; width:180px;">
</div>
上面的代码防止左侧栏与中心容器重叠;但问题仍然存在于右侧栏。
这是一段代码:preview
最佳答案
您需要将三个 DIV 包裹在一个包裹 DIV 中,并设置 min-width
以防止重叠。这可以防止它变得比三列更窄。将宽度相加,将其设置为最小值。
关于HTML/CSS 修复定位导致 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20478256/