Question

如何将div放在嵌套div下面？现在，当我希望它出现在第二个div（.box2）下面时，第三个div（.box3）似乎与第二个div重叠。请参阅示例：https://jsfiddle.net/662fwmq5/

＆＃13;

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

＆＃13;

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

＆＃13;

当屏幕尺寸变窄时，我的问题会进一步放大。我希望第三个div（.box3）响应屏幕大小的变化，以便第三个div总是出现在第二个div（.box2）之下。

Answer 1

您为box1设置了固定高度 - 这就是以下div与嵌套内容重叠的原因。

请从height移除box1，然后转到：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用container div并将box1和box2置于其中，而box3在其外部将是最简单和最相关的。

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

2 个答案: