仅使用 CSS，我可以将子项限制为父项宽度，而无需事先固定父项的宽度吗？答案

【问题标题】：Using only CSS, can I limit a child to the parent width, without previously fixing the parent's width?仅使用 CSS，我可以将子项限制为父项宽度，而无需事先固定父项的宽度吗？
【发布时间】：2015-06-04 04:55:06
【问题描述】：

这是我的第一个问题，所以我会尽我所能，尽可能连贯地表达我的观点。

让我们假设如下：

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

基本上我需要的是绿色框与橙色框的宽度相同，而不给橙色框（也不是棕色）任何宽度。使用浏览器正确呈现它所需的宽度。

【问题讨论】：

你能创建一个小提琴作为例子吗？
#child1 可以有固定宽度吗？
@MattWhiteley，第一次使用小提琴所以这里什么都没有：jsfiddle.net/ricardojcmarques/seckdugj/5 基本上我需要绿色框与橙色框的宽度相同，而不给橙色框任何宽度。使用浏览器正确呈现它所需的宽度。
@FuriousD，没有。无法设置任何宽度，否则我必须为每个页面/翻译手动设置。
你不能单独使用 CSS 来做到这一点。您希望父块采用两个子元素中较小者的宽度。 CSS 布局引擎将尝试最大化父级的宽度，以在可用行宽内显示尽可能多的文本。你需要一些 jQuery/JavaScript 或者修复父容器的宽度。或者，如果你想固定父元素的高度，你可以使用绝对定位的子元素，但是，你可能会出现滚动条。

标签： html css width

【解决方案1】：

所以只是即兴发挥你的建议，这里的关键是设置

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

这是一个有效的JSfiddle

【讨论】：

谢谢，我能够通过职位提示收集一些信息。当你们都说同样的话时，我不能表示这两个答案都有帮助......
没问题 ;) 不过，很乐意提供帮助。

【解决方案2】：

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

【讨论】：

嗯，这看起来不像我需要的：|看看我原来的帖子，我试着做了一个小提琴并更新了它。
我在上面贴了另一个例子。
谢谢，职位提示帮助我找到了我需要的东西。选择你的答案，因为你是第一个。