html dd-element中没有换行符答案

【问题标题】：No line break in html dd-elementhtml dd-element中没有换行符
【发布时间】：2012-01-31 13:54:38
【问题描述】：

我试图让作为 dd 元素的图像标题中断，使其与 dt 元素一样宽。我不想使用宽度并使用 display: inline 和 float: left 不起作用。我在这里有代码和示例：http://jsfiddle.net/PnyHs/11/。我正在使用 Firefox 9 进行测试。

我现在唯一能想到的解决方案是使用 javascript 来测量 dt-element 并将该宽度设置为 dd-element。

提前感谢您的任何帮助和建议。

【问题讨论】：

这比看起来更难。需要支持IE7吗？
是的，IE7 支持是必需的，你是对的，它比看起来更难。我已经用一点 javascript 解决了我的问题，因为我知道其他解决方案而无需更改 html。

标签： html css image list-definition

【解决方案1】：

如果你想保持 HTML 的结构而不使用max-width，我敢说这是不可能的，原因如下：

您期望img 对象约束dd 元素。然而，这两个元素都是兄弟元素，并且只能由其父元素在宽度方面进行限制（或者一个元素可以被其子元素拉伸）。因此，dd 将根据需要扩展，因为父元素没有限制它。

当然这可以通过设置父元素的宽度来解决，但是你已经提到你不想这样做，因为图片会有不同的大小。

不幸的是，除非你改变你的 HTML 结构，否则没有 JavaScript 是不可能的（除非我在这里遗漏了一些明显的东西）。

【讨论】：

谢谢。我已经给出了这个答案，因为它与我的想法和发现一致。事实上，我已经用 javascript 解决了这个问题。

【解决方案2】：

对图像和标题使用dl 标记是人为的，不会使样式更容易。不需要脚本或显式设置图像宽度的问题的唯一方法（使标题与图像一样宽）似乎是使用带有caption 元素的单单元格表，请参阅fiddle 和@987654322 @。示例：

<table class="photo">
    <caption align="bottom">Image Caption with a very very very very very long    
     text</caption>
    <tr><td>
        <img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
    </td></tr>
</table>

【讨论】：

我想在不更改 html 的情况下解决这个问题。谢谢你的链接，下次我会继续的。

【解决方案3】：

您可以为您的dl 元素添加宽度吗？像这样http://jsfiddle.net/PnyHs/12/

和你的图片一样宽

【讨论】：

图像宽度可以变化，所以我不想使用宽度。我不确定这是否可能。如上所述，我最后的手段是像在示例中那样设置宽度，但使用 javascript 动态设置。
我明白了。正如您所说，除非您知道宽度，否则不幸的是，仅使用 html/css 是不可能的。
只是想，通过添加一个 200px 的 max-width 来妥协怎么样？