这是我的第一个问题，所以我将尽我所能尽可能地表达我的观点。
让我们假设类似：
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
我要问的是有一种方法可以“链接/锁定”＃child2的宽度到＃child1的宽度或#parent的宽度，以使＃child2永远不会超过＃child1的宽度。
无论如何，仅使用CSS，我就可以强制＃child2（或#parent）具有与＃child1相同的宽度，而无需固定#parent和＃child1的宽度？
关键是我希望能够即时编辑＃child1和＃child2的内容（例如翻译），但由于＃child2总是有更多的单词，因此它将总是更宽。
PS：不要忘记，仅使用CSS，而不使用JavaScript。
编辑：做了一个小提琴https://jsfiddle.net/ricardojcmarques/seckdugj/5/
基本上，我需要的是绿色框的宽度与橙色框的宽度相同，而没有给橙色框（也不是棕色）提供任何宽度。使用宽度浏览器需要正确呈现它。
有点破解，但它可能会起作用。
<div id="parent">
<div id="child1">short text that will expand and expand
<div id="child2">very long text that will remain within the confines of child1
</div>
</div>
</div>
#parent {
position:absolute;
background-color:green;
padding:5px;
padding-bottom:0;
}
#child1 {
position:relative;
background-color:#fff;
}
#child2 {
position:absolute;
border:5px solid green;
border-top:none;
margin-left:-5px;
margin-right:-5px;
}
EDIT
看一看，它离您更近一些，但是我必须修改列表才能嵌套child2。我不知道您是否需要将特定样式设置为父div，但如果这样做，则需要更多考虑。演示2
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句