CSS具有两个div相同的宽度

Question

因此，我试图为两个div创建一个响应式CSS。第一个div用于摘要，第二个div用于摘要说明。如果第二个div中的内容超出了宽度，我该如何使第二个div紧接在第一个div的下方，同时包裹第二个div前div个？

div.firstdiv {
  padding: 60px 0;
}

div.seconddiv {
  padding: 30px;
  text-align: center !important;
}

<div class="firstdiv">This is a test for customer issues & solutions
  <div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
  </div>

Answer 1

问题的答案就在问题本身中。这就是元素自然表现的方式。不需要将第二个div放在第一个div中，只需将它们作为同级，就像这样：

<div class="firstdiv">
   This is a test for customer issues & solutions
</div>
<div class="seconddiv">
   We need to address the customer issues and provide them the appropriate solutions based on issue priority
</div>

以及您的CSS：

.firstdiv, .seconddiv {
  width:100%; // or whatever you'd like the width to be
  margin:10px // again, whatever you'd like.
}

默认情况下，seconddiv元素将显示在firstdiv元素下方，宽度将相等，并且文本将自动换行。

旁注，您应该将文本包装在p标记或类似标签中，而不是仅将文本浮动在div内。

Answer 2

如果您愿意在第一格中使用固定尺寸，则可以尝试使用显示网格。

解决方案是将两个div放在同一包装器中，并在包装​​div中使用CSS Grid。像这样：

	div.grid{
		display: grid;
		grid-template-columns: minmax(min-content, 300px);
		grid-gap: 10px;
	}

<div class="grid">
		<div class="firstdiv">
			This is a test for customer issues & solutions
		</div>
		<div class="seconddiv">We need to address the customer issues and provide them the appropriate solutions based on issue priority
		</div>
</div>