所以我有一个<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解决方案。谢谢！
使用CSS table + table-caption的一种方法。
.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句