2

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

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

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

4

3 回答 3

2

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

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

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

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

于 2012-01-31T14:20:56.083 回答
1

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

<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>
于 2012-01-31T14:37:39.530 回答
0

您可以为dl元素添加宽度吗？与您的图像宽度相同，例如http://jsfiddle.net/PnyHs/12/

于 2012-01-31T13:59:53.777 回答