html - 溢出问题 :auto

Question

我有这些带标题的部分，其中背景在框外(看起来像丝带)。但是高度需要调整以适应长标题，并且内部容器会超出包含 div 的 hte。所以我在外面的 div 上放了一个 overflow:auto，但这切断了色带的外面部分。

有什么想法吗？

http://jsfiddle.net/S2p83/

Answer 1

您可以在要拉伸(stretch)的内部容器关闭之前插入一个中断元素(类似于 <div style="clear: both;"></div> 或 <br style="clear: both;"> 但是，这是添加了不必要的标记。

您更好(在我看来更合适)的选择是在 CSS 中修复它。您需要在整个容器上使用 clearfix。您最好的选择是添加一个 CSS clearfix 类。我更喜欢 "Micro Clearfix" hack ，我在这里将其应用于您的代码:

http://jsfiddle.net/N2Mh7/

编辑:预澄清答案:

您需要让高度自行调整。所以，设置一个 min-height并使用 background-size (但要注意向后兼容性)拉伸(stretch)背景。

问题是，您的背景不会很好地拉伸(stretch)。因此，您可能需要重新考虑在该横幅中允许使用多少文本。

这是一个更新的 jsfiddle:

http://jsfiddle.net/Dmm34/