Question

我遇到了960网格系统的问题。

我的英语不太好，所以我会给你看一张我的意思：

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

我想将底部<div id="result"></div>推到顶部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;
}

希望有人可以帮助我

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>

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

需要帮助whit 960 Grid System

1 个答案: