删除网页中的白色间距 - CSS 960.gs

Question

我目前正在全力开发我的投资组合网站。我已经读过一个名为“960.gs”的CSS框架，我使用了类似的东西，但我之前从未使用过CSS-pure框架，所以我自然有点生疏。

无论如何，这是我的网站。我想删除顶部有“标题”的两段之间的白色间距。我不确定是什么导致它，因为，诚然，我的CSS也有点生疏。

任何解决方案都将受到赞赏。

我的HTML：

<section class="container_12">
    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <aside class="grid_3 ">
        <h1>More</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </aside>    

    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <article class="grid_9">
        <h1>Title</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</section>

我的CSS（此时非常少）：

@import url("nav.css");
@import url("960.css");

body {

}

a {
    font-family:arial;
}

h1 {

}

h2 {

}

h3 {

}

h4 {

}

h5 {

}

/* MAIN CONTENT */

* {

}

.container {
    margin:0 auto;
    max-width:1100px;
    width:90%;
}

960.gs CSS（活跃的代码）：

body {
  min-width: 960px;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

/* `Grid >> 12 Columns
----------------------------------------------------------------------------------------------------*/

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

.container_12 .grid_4 {
  width: 300px;
}

.container_12 .grid_5 {
  width: 380px;
}

.container_12 .grid_7 {
  width: 540px;
}

.container_12 .grid_8 {
  width: 620px;
}

.container_12 .grid_10 {
  width: 780px;
}

.container_12 .grid_11 {
  width: 860px;
}

Answer 1

只需使用框架来构建主要布局（列等）。 Example

<main class="container_12">
  <div id="main-column" class="grid_9">
    ...
  </div>
  <aside class="grid_3">
    ...
  </aside>
</main>

似乎你的CSS没有为grid_3或grid_9提供宽度

Answer 2

将右列更改为正确浮动，它应该看起来更好。

aside.grid_3 {
    float:right ;
}

Answer 3

好像你的CSS没有为grid_3或grid_9提供宽度。此外，您还没有指定要将<aside>向右移动到任何地方（至少我可以看到）

相应地设置宽度like this fiddle here and it should function。

body {
    width: 100%;
    max-width: 960px;
}

aside {float:right; width:30%; max-width: 300px;}
article {float:left; width:60%; max-width: 600px;}
.clear {clear:both;}

这应该是一个很好的起点。