1

我正在使用论文 2 在我的网站上开发一个主题。我刚刚修改了经典的响应式主题。

我使用名为“header-middle-sub”的 div 标签创建了一个 id。这是我使用的代码：

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

它在使用桌面的浏览器上运行良好。但由于是响应式主题，所以我在平板或手机上打开网站时，宽度占用固定为 897px。

如果我删除此行width: 897px;，标题将在屏幕上居中。那么保留标题位置的代码是什么？

顺便说一句，这是我的网站http://bit.ly/1cuTmtE。

更新：

任何人都可以访问我的网站并使用 chrome 或 firefox 的“检查元素”吗？

这是我的标题部分的 CSS：

.header {
    margin: 0 auto;
    padding: 0px;
    background-color: #C4C4C4;
}

#header-top {
    background-color: #7ED7F2;
}

#header-middle {
    background-color: #6699CC;
    border-bottom: 5px solid #0f3158;
    border-top: 2px solid #0F3158;
    padding: 20px 0 20px 0;
}

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    width: 897px;
}

#header-bottom {
    background-color: #0099CC;
}

#header-container {
    display: table;
    margin: 0 auto;
}

这是我使用论文 2 的主题布局。

在此处输入图像描述

4

5 回答 5

1

它也不适用于台式机！使您的浏览器窗口非常小，您将看到水平滚动条。宽度始终是固定的。

为避免此行为，请使用以下 CSS 代码：

#header-middle-sub {
    background-color: #6699CC;
    display: table;
    margin: 0 auto;
    max-width: 897px;
    width: 100%;
}

现在，它总是会尝试拉伸div整个浏览器窗口，但将其限制为max-width897px，但可能会更少，并且在手机上或调整浏览器窗口大小时会使用更少。

于 2013-10-09T12:19:01.793 回答
0 
float: left;

在这里阅读：

http://www.w3schools.com/css/css_float.asp

于 2013-10-09T12:01:37.623 回答
0

尝试使用浮动属性：float:left;

于 2013-10-09T12:02:10.220 回答
0

您应该使用媒体查询来根据分辨率更改容器的宽度。顺便说一下。问题是margin: 0 auto意味着：“获取我当前的宽度并将我定位在中心，左右边距相等。所以，如果你想使用边距，那么你需要媒体查询来动态改变容器的宽度。

于 2013-10-09T12:02:13.577 回答
0

该属性text-align: left将为此工作，但在问题的更多细节或小提琴之后仍然会很清楚

于 2013-10-09T12:03:08.500 回答