Question

我是CSS的新手，我遇到了一个编码问题，我必须在另一个内部创建三个框。以下是我的代码。截至目前，它只创建了两个盒子。我应该在我的代码中做出哪些更改以包含第三个框。

＆＃13;

#first {
  width: 100px;
  height: 100px;
  background: red;
  overflow: hidden;
}

#first #second {
  position: relative;
  width: 50%;
  height: 50%;
  margin: auto;
  margin-top: 25%;
  background: black;
}

#first #second #third {
  position: relative;
  width: 25%;
  height: 25%;
  margin: auto;
  margin-top: 25%;
  background: orange;
}

＆＃13;

<body>
  <div id="first">
    <div id="second"></div>
    <div id="third"></div>
  </div>
</body>

＆＃13;

Answer 1

#first {
  width: 100px;
  height: 100px;
  background: red;
  overflow: hidden;
}

#second {
  position: relative;
  width: 50px;
  height: 50px;
  margin: auto;
  margin-top: 25px;
  background: black;
  overflow: hidden;
}

#third {
  width: 12.5px;
  height: 12.5px;
  margin-top: 18.75px;
  margin-left: 18.75px;
  background: orange;
}

<body>
  <div id="first">
    <div id="second">
      <div id="third">
      </div>
    </div>
  </div>
</body>

Answer 2

您错过了将#third div放在#second div中。尝试将其放入第二个。试试这个。

<body>
  <div id="first">
    <div id="second">
      <div id="third"></div>
    </div>
  </div>
</body>

Answer 3

这不是WITH course_versions_with_progress AS ( SELECT cv.* FROM course_versions AS cv INNER JOIN courses AS c ON c.id = cv.course_id INNER JOIN course_progresses AS cp ON cp.course_version_id = cv.id WHERE c.status = 1 AND cv.status = 1 AND cp.user_id = 123 ), latest_course_versions AS ( SELECT DISTINCT ON(cv.course_id) cv.* FROM course_versions AS cv INNER JOIN courses AS c ON c.id = cv.course_id WHERE c.status = 1 AND cv.status = 1 ORDER BY cv.course_id, cv.created_at DESC ) SELECT * FROM course_versions_with_progress UNION SELECT * FROM latest_course_versions WHERE NOT EXISTS ( SELECT 1 FROM course_versions_with_progress WHERE course_id = latest_course_versions.course_id )而是css的问题。

html

在上面的代码中。 <div id="first"> <div id="second"> <div id="third"></div> </div> </div>是Third的孩子，Second是Second的孩子。

CSS：三个盒子，这样较大的盒子就在最大的盒子里面

3 个答案: