1

我为大于 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>
4

4 回答 4

2

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

查看以下文章以开始使用

http://mediaqueri.es/

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

于 2013-08-28T06:48:56.170 回答
1

问题出在您的代码中。

您的"outer_footer_bottom"div 的宽度为 100%（不固定）
，而"center"div 的宽度为 1000px（固定）

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

好的，当您增加缩放级别时，窗口大小会减小，并且大小"outer_footer_bottom"将小于 1000 像素。但"center"div 的大小保持不变，即 1000px。

所以这就是你面临这个问题的原因。

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

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

于 2013-08-28T08:31:58.913 回答
0 
.center {
        margin: 0 auto;
    }

从中心类的样式中删除 width:1000px。

于 2013-08-28T06:55:57.800 回答
0

您的代码没有任何问题。当您增加或减少缩放级别时，它具有 100% 的宽度#outer_footer_bottom并在您的缩放级别小于 1000 像素时显示滚动条.center

于 2013-08-28T07:04:15.493 回答