html - 需要 960 网格系统的帮助

我对 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>

希望有人能帮助我

最佳答案

将左边的两个网格合并为一个 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>

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

关于html - 需要 960 网格系统的帮助，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30581246/

html - 需要 960 网格系统的帮助

上一篇：css - 如何去除图片上的 CSS 链接效果

下一篇：javascript - HTML & CSS : Dragging and drop in multiple directions