html - 强制子级浮动父级宽度

Question

关于强制嵌套 div 子填充其父容器的宽度有很多问题，但我的问题是如何强制具有大于其父容器的自然流宽度的子 div（例如，子 div包含一个文本节点，最终将子节点拉伸到父容器的宽度之外）以保持其父容器的宽度？

一个简单的非动态解决方案是在父节点上设置一个宽度，但是如果宽度不是预先确定的（出于响应原因）怎么办？是否可以向子元素添加一些标签，以确保它们包装其内容并强制元素保持在父元素的宽度内？

<div class="parent"> //Width is not set
    <div class="child">Here might be a long string of dynamic text</div>
</div>

我知道通过在父元素上设置宽度可以解决这个问题，但在我的情况下我不能这样做，因为元素设置为根据屏幕大小调整其宽度。因此，例如，如果用户在手机上并从纵向变为横向，则父元素必须能够调整大小，我宁愿不必为此使用 javascript。

我还应该提到，在我的特定情况下，父元素是一个浮点数。我不确定这是否重要。

score 1 · Accepted Answer

为什么不使用 max-width CSS 属性？div，特别是这里的子元素，是一个块级元素，应该将自己限制在父 div 的宽度内。如果下面的代码没有帮助，我们将需要您扩展您正在处理的内容。

.child {
max-width: 100%
}

在你的样式表中尝试一下，看看 css 的魔力！干杯

score 1 · Accepted Answer

根据 Sheikh Heera 对该问题的评论，实现此目的的唯一方法是在父元素上实际设置宽度。在我的情况下，最强大的解决方案是使用媒体查询来相应地设置每个屏幕尺寸的宽度。它不完全是我想要的解决方案，但它是最好的选择。

score 0 · Accepted Answer

这是你想要达到的目标吗？

css

.parent {float:left; width:100%}
.child {display:block}

希望这有帮助..

score 0 · Accepted Answer

您可以使用溢出样式在父级中包含子级大小：

.parent {
    overflow: hidden;
}

.child {
    width: 100%;
}

html - 强制子级浮动父​​级宽度