Question

我无法让我的960.gs占用浏览器的整个宽度。我希望网格在调整大小时是100％，也就是说如果我向外滚动文本会显得更小并占用更少的线条，但网格仍将占用宽度的100％。

这里有这个问题When using grid 960, can I still have a 100% width header section?答案是将顶部设置为100％。我添加了代码，但这没有效果，也没有将body的宽度设置为100％和所有div，等等。我究竟做错了什么？这是代码：

<!doctype html>
<html>

    <head>
        <title>My Fragment</title>
        <meta charset="utf-8" />
        <!-- Symbols rendered -->
        <meta name="value" />
        <!-- Do not need to close -->
        <link rel="stylesheet" href="css/960_12_col.css">
        <style>
            body {
                background:green;
            }
            div {
                background: white;
            }
            .grid_4 {
                height: 100px;
            }
        </style>
    </head>

    <body>
        <div class="header" style="width:100%;"></div>
        <div class="mainWrapper container_12">
            <div class="grid_4" style="background:red">sdfds</div>
            <div class="grid_4" style="background:blue">sdfs</div>
            <div class="grid_4" style="background:yellow">sdfs</div>
            <div class="clear">sdfds</div>
        </div>
    </body>

</html>

但这给了我以下结果：

我希望在红色列的左侧和黄色列的右侧看不到绿色空间，但事实并非如此。我如何摆脱任何一方的空间？

（请注意我是css和Html的新手，并且在30天内一直关注学习HTML，以及我在网上找到的任何其他内容。）

Answer 1

首先 - <div class="header" style="width:100%;"></div>没有包裹你的容器。

第二：将width: 100%添加到mainWrapper课程而不是.header，但我知道960网格系统中存在硬编码宽度，因此您的.grid_4列将会仍然是width: 300px。

尝试使用具有流畅布局的其他网格系统，例如：http://www.designinfluences.com/fluid960gs/

Grid 960通过调整大小占据整个宽度

1 个答案: