仅使用CSS,我可以将子项限制为父级宽度,而无需事先修复父级的宽度吗?

时间:2015-03-31 00:38:46

标签: html css width

这是我的第一个问题,所以我会尽力让我的观点尽可能连贯。

让我们假设:

<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/

基本上我需要的是绿色框与橙色框的宽度相同,没有任何宽度的橙色框(也不是棕色)。使用浏览器所需的宽度来正确呈现它。

2 个答案:

答案 0 :(得分:1)

所以只是对你的建议进行了即兴创作,这里的关键是设置

#parent{
    background: brown;
    position: absolute;
    left: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

Heres工作 JSfiddle

答案 1 :(得分:0)

DEMO

一点点黑客但可能会有效。

<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