如何将一个div放置在嵌套div下方？

Question

如何将一个div放置在嵌套div下方？

5

我该如何将一个div放在另一个嵌套的div下面？目前第三个div(.box3)好像会和第二个div重叠，但我希望它出现在第二个div(.box2)下面。请参考以下示例：https://jsfiddle.net/662fwmq5/

.box1 {
  width: 50%;
  height: 200px;
  padding: 15px;
  background-color: red;
  margin: 0 auto;
}
.box2 {
  width: 80%;
  padding: 15px;
  background-color: blue;
  color: #fff;
  margin: 0 auto;
  margin-top: 100px;
}
.box3 {
  background-color: #ccc;
  text-align: center;
}

<div class="box1">
  Box 1
  <div class="box2">
    Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing. Equities revenue came in at
    $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility.
  </div>
</div>

<div class="box3">
  More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday.
</div>

当屏幕大小变小时，我的问题会进一步放大。我希望第三个div（.box3）能够对屏幕大小的变化做出响应，以便第三个div始终显示在第二个div（.box2）下方。

- Sun P.

2个回答

0

你可以使用一个 container 容器 div，并将 box1 和 box2 放在里面，将 box3 放在外面，这将是最简单和相关的方法。

- Ankur Pathak

谢谢。这也很有帮助。 - Sun P.

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

您已经为box1设置了固定高度-这就是为什么下一个div会覆盖嵌套内容的原因。

因此，从box1中删除高度，然后就可以了：

.box1 {
 width: 50%;
 /*height: 200px;*/
 padding: 15px;
 background-color: red;
 margin: 0 auto;
}

.box2 {
 width: 80%;
 padding: 15px;
 background-color: blue;
 color: #fff;
 margin: 0 auto;
 margin-top: 100px;
}

.box3 {
 background-color: #ccc;
 text-align: center;
}

<body>
 <div class="box1">
 Box 1
  <div class="box2">
  Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing.
  Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility.
  </div>
 </div>

 <div class="box3">
  More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday.
 </div>
</body>

如果您无法更改高度，则可以使用overflow-y: auto来溢出它：

.box1 {
 width: 50%;
 height: 200px;
    overflow-y: scroll;
 padding: 15px;
 background-color: red;
 margin: 0 auto;
}

.box2 {
 width: 80%;
 padding: 15px;
 background-color: blue;
 color: #fff;
 margin: 0 auto;
 margin-top: 100px;
}

.box3 {
 background-color: #ccc;
 text-align: center;
}

<body>
 <div class="box1">
 Box 1
  <div class="box2">
  Fixed income, currency, and commodities revenue was $2.65 billion ($2.21 billion expected), up 39% thanks to stronger performance in credit products, especially mortgages, as well as in rates products and client financing.
  Equities revenue came in at $954 million ($1.03 billion expected), down 17% because of lower client activity in cash and derivatives, which the firm said reflected lower market volatility.
  </div>
 </div>

 <div class="box3">
  More than 14,000 seasonal positions were transitioned to regular, full-time roles after the holidays last year, and the company expects to increase that number this year, Amazon said on Thursday.
 </div>
</body>