Question

我正在尝试更改主页上的网站页眉，页脚及其轮播区域。但是因为该站点被设计为在标题中启动980容器，所以遍及整个站点并以页脚结尾，因此它限制了整个站点中的所有元素。但我需要标题，菜单，主页旋转木马和页脚，宽度为100％。

我知道要尝试突破容器，但是因为这个网站太大了，打破容器并将其放回包裹每个元素（其中包含模板的所有元素）的内容将会如此很长一段时间因为现在容器正在影响的页面对我来说现在不是很好，有没有其他方法可以做到这一点？

以下是该网站的实时预览：http://bit.ly/1kpGc2G

可能不是最佳做法，但现在只是让我了解的事情。

这是opencart包装它有帮助。

Answer 1

您是否要求整个网站填充屏幕宽度？

看起来你只需要给980容器宽100％。然后设置所有其他元素的样式，使它们左右填充以使它们重新排列。

编辑示例

你说你不介意我是不是很乱......

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Width Test</title>
<style>
    .wrapper {
        width:100%;
        overflow: hidden;
    }
    p {
        color: #ccc;
        text-align: left;
    }
    .header, .article, .footer {
        display: inline-block;
        text-align: center;
        background-color: #444;
        width: 100%;
        max-width: 600px;
        padding: 0 30%;
        margin: 0;
    }
    .article {
        background-color: #666;
    }
    .footer {
        background-color: #999;
    }
</style>
</head>

<body>
<div class="wrapper">
    <div class="header"><p>Header</p></div>
    <div class="article"><p>Article</p></div>
    <div class="footer"><p>Footer</p></div>
</div>
</body>
</html>

基本上我做了这个，所以填充溢出了包装器，然后使用text-align:center使内容div居中。它并不完美，但我认为这可以实现您的要求。

Answer 2

您的代码中存在一些问题：

在整个网站容器上有一个text-align：left
大多数元素的宽度：100％直接在元素上，这意味着它们不会居中。它们应该有一个设定的宽度，最大宽度：100％;

即。我设置#category {width：1024px; margin：0 auto;}让它居中。您的轮播图像没有设置宽度，这意味着如果它低于1300px，它将超出屏幕。 设置img {max-width：100％;} 。

#footer的：保证金：26px auto;应该把它放在中心位置。

我可能已经忘记了一些事情，但这使我的网站成为我的中心，包括放大和缩小，并排除潜在的水平滚动条。

全宽980个容器内

2 个答案: