需要 960 网格系统的帮助

Question

我的 960 网格系统有问题。

我的英语不太好所以我给你看我的意思的图片：

https://picr.ws/images/0651e9daf54838f294450fae875b25e5.png

我想将底部 grid_4 推到顶部 grid_4，而不是停留在 grid_8 下面。这是我的代码：

.container {
    width: auto;
    height: auto;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #dedede;
    background-color: #fff;
    position: relative;
}

.container .title {
    font-weight: 400;
    font-size: 14pt;
}

.container .content {
    font-size: 10pt;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>960 Grid System</title>

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css">
    </head>

    <body>
        <main class="container_12">
            <div class="grid_4">
                <div class="container">
                    <div class="title">grid_4</div>
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing 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.
                    </div>
                </div>
            </div>
            <div class="grid_8">
                <div class="container">
                    <div class="title">grid_8</div>
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing 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.
        Lorem ipsum dolor sit amet, consectetur adipisicing 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.
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <div class="grid_4">
                <div class="container">
                    <div class="title">grid_4</div>
                    <div class="content">
                        Lorem ipsum dolor sit amet, consectetur adipisicing 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.
                    </div>
                </div>
            </div>
        </main>
    </body>
</html>

希望有人能帮助我

Answer 1

将左边的两个网格合二为一grid_4。

.container {
  width: auto;
  height: auto;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #dedede;
  background-color: #fff;
  position: relative;
}

.container .title {
  font-weight: 400;
  font-size: 14pt;
}

.container .content {
  font-size: 10pt;
}

.grid_4, .grid_8 {
    background-color: #cccccc;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>960 Grid System</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/960gs/0/960.css">
  </head>
<body>

<main class="container_12">
  <div class="grid_4">
    <div class="container">
      <div class="title">Title in container 1</div>
      <div class="content">
          Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class="container">
      <div class="title">Title in container 2</div>
      <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
    </div>
  </div>
  <div class="grid_8">
    <div class="container">
      <div class="title">grid_8</div>
      <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing 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.
      </div>
    </div>
  </div>
  <div class="clear"></div>
</main>

</body>
</html>

我添加了额外的背景颜色以更好地展示它是如何工作的。

需要 960 网格系统的帮助

Need help whit 960 Grid System

html

css

grid