HTML/CSS 修复定位导致 div 重叠

Question

我正在尝试创建 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

Answer 1

您需要将三个 DIV 包裹在一个包裹 DIV 中，并设置 min-width 以防止重叠。这可以防止它变得比三列更窄。将宽度相加，将其设置为最小值。