需要帮助白色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>

希望有人能帮助我

将左边的两个栅格合并为一个栅格。

.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>

我已经添加了额外的背景色,以更好地显示它是如何工作的

最新更新