小编Bru*_*rce的帖子

HTML/CSS固定定位导致重叠的div

我正在尝试创建具有固定定位的2个侧边框(左侧和右侧),以及内容的居中容器.

在此输入图像描述

问题是当最小化屏幕时,2个横幅覆盖中心容器.我需要一个CSS解决方案来将视图的最小宽度设置为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>
Run Code Online (Sandbox Code Playgroud)

上面的代码可以防止左栏与中心容器重叠; 但问题仍然存在于正确的栏中.

这是代码的小提琴:预览

html css position css-position web

5
推荐指数
1
解决办法
5807
查看次数

标签 统计

css ×1

css-position ×1

html ×1

position ×1

web ×1