这是我的第一个问题,所以我会尽力让我的观点尽可能连贯。
让我们假设:
<div id="parent">
<div id="child1">shot text</div>
<div id="child2">very long text</div>
</div
我要问的是,是否可以通过&#34;链接/锁定&#34; #child2 width到#child1&#39; s width或#parent&#39; s使#child2永远不会超过#child1的宽度。
有没有,只使用CSS,我可以强制#child2(或#parent)与#child1具有相同的宽度,而无需修复#parent&#39; s和#child1&#39; s width?
关键是我希望能够动态编辑#child1和#child2的内容(如翻译),但是#child2总会有更多的单词,它总是会更宽。
PS:不要忘记,只使用CSS,不使用JavaScript。
编辑:完成小提琴https://jsfiddle.net/ricardojcmarques/seckdugj/5/
基本上我需要的是绿色框与橙色框的宽度相同,没有任何宽度的橙色框(也不是棕色)。使用浏览器所需的宽度来正确呈现它。
答案 0 :(得分:1)
所以只是对你的建议进行了即兴创作,这里的关键是设置
#parent{
background: brown;
position: absolute;
left: 0;
height: 0;
margin: 0;
padding: 0;
}
Heres工作 JSfiddle
答案 1 :(得分:0)
一点点黑客但可能会有效。
<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,但如果你这样做,将需要更多的思考。
Demo2