Question

我为屏幕尺寸大于1100像素写了CSS。当我按ctrl和+（加号）符号并放大页面的中心容器时无法换行。它突然崩溃了。

HTML：

<div id="outer_footer_bottom">
    <div class="center">
        blabla balaa blabalblabla
    </div>
</div>

CSS：

<style>
    #outer_footer_bottom{
        width: 100%;
        float: left;
        background: #8ac53f;
        height: 26px;
        padding: 16px 0 0 0;
        text-align: center;
        color: #fff;
        overflow-x: auto;
    }

    .center {
        width: 1000px;
        margin: 0 auto;
    }
</style>

Answer 1

尝试使用媒体查询来获取响应式网页设计

检查以下文章以开始

http://mediaqueri.es/

http://css-tricks.com/css-media-queries/

Answer 2

问题在于您的代码。

您的"outer_footer_bottom" div宽度为100％（不固定）
并且"center" div的宽度为1000px（固定）

假设您的缩放级别为100％，窗口大小约为1200像素，这意味着您的"outer_footer_bottom" div的宽度为1200像素，"center" div的大小为1000像素。

当你增加缩放级别时窗口大小减小，"outer_footer_bottom"的大小将小于1000px。但"center" div的大小保持不变，即1000px。

这就是你遇到这个问题的原因。

解决方案1：将“outer_footer_bottom”div的宽度更改为固定（例如1000px或1200px）

解决方案2：将“中心”div的宽度更改为不固定（例如100％或90％）

Answer 3

.center {
        margin: 0 auto;
    }

从中心类的样式中删除宽度：1000px。

Answer 4

您的代码没有任何问题。当您增加或减少缩放级别时，#outer_footer_bottom的宽度为100％，当.center

中定义的缩放级别低于1000px时显示滚动条

缩放时的CSS问题

4 个答案: