html - 如何根据h标签的宽度设置p标签的宽度

Question

所以我有一个 <h>标签和一个 <p>标签。 <p>的宽度标签需要遵循 <h> 的宽度标签和 <h> 的宽度标签将根据其文本的长度动态更改。

下面是例子

Example1:

Heading: this text will change from time to time

Paragraph: Width of this text needs to fit the 
width of previous Heading tag. blah blah blah bl
ah blah blah lbah

Example2:

Heading: this text changed
Paragraph: Width of this 
text also changed because
width of prevous heading
changed.

我不能使用 javascript，因此需要一个 css 或 html 解决方案。谢谢!

Answer 1

一种方法是使用 CSS table + table-caption。

jsfiddle

.container {
  display: table;
}
.container h2 {
  margin: 0;
}
.container p {
  display: table-caption;
  caption-side: bottom;
  background: #ccc;
  padding: 5px;
}

<div class="container">
  <h2>Short Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec risus dignissim, varius nibh sed, dapibus tortor.</p>
</div>

<br/>

<div class="container">
  <h2>Long Long Long Heading</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec risus dignissim, varius nibh sed, dapibus tortor.</p>
</div>