在html dd元素中沒有換行符

我想要獲取圖像標題，它是一個dd元素，因此它的寬度就像dt元素一樣寬。我不想使用寬度和使用display：inline和float：left不起作用。我在這裏有代碼和示例：http://jsfiddle.net/PnyHs/11/。我正在使用Firefox 9進行測試。在html dd元素中沒有換行符

我現在想出的唯一解決方案是使用JavaScript來測量dt元素並將該寬度設置爲dd元素。

在此先感謝您的任何幫助和建議。

來源

2012-01-31 TJ.

這看起來比較困難。你需要支持IE7嗎？ – thirtydot 2012-01-31 14:29:34

是的，IE7的支持是必需的，你是對的，它比看起來更困難。我已經用一個小小的javascript解決了我的問題，因爲我知道其他解決方案而無需更改html。 – 2012-02-02 08:48:46

如果你想保持你的HTML的結構，而不是使用max-width，我不敢說這是不可能的，這是爲什麼：

你期待的img用於約束dd元素。然而，這兩個元素都是兄弟姐妹，並且只能通過父母的寬度來限制（或者元素可以由孩子伸出）。因此，dd將盡可能擴展，因爲父元素不限制它。

當然這可以通過設置父元素的寬度來解決，但是你已經提到過你不想這樣做，因爲圖片會有不同的大小。

所以不幸的是，除非你改變你的HTML結構，否則沒有JavaScript就不可能（除非我在這裏忽略了一些明顯的東西）。

來源

2012-01-31 14:20:56 MMM

謝謝。我已經給出了這個答案，因爲它與我的想法和發現一致。事實上，我已經用javascript解決了這個問題。 – 2012-02-02 08:52:23

您可以爲您的dl元素添加寬度嗎？相同的寬度圖像這樣http://jsfiddle.net/PnyHs/12/

來源

2012-01-31 13:59:53 MrMisterMan

圖像寬度可能會有所不同，所以我不想使用寬度。我不確定這是否可能。如上所述，我最後的手段是設置寬度，就像您在示例中那樣動態地使用JavaScript。 – 2012-01-31 14:05:05

我明白了。正如你所說，除非你知道寬度，我不認爲這是可能的只是HTML/CSS不幸的。 – MrMisterMan 2012-01-31 14:09:46

想一想，如何通過添加200px的「max-width」來達成妥協呢？ – MrMisterMan 2012-01-31 14:11:09

對圖像和標題使用dl標記是人爲的，不會使樣式更容易。解決此問題的唯一方法（使標題與圖像一樣寬）不需要腳本或設置圖像寬度，似乎是使用具有caption元素的單元表，請參閱fiddle和my page on image captions。例如：

<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-31 14:37:39

我想在不更改html的情況下解決此問題。感謝您的鏈接，下次我將繼續關注。 – 2012-02-02 08:50:41

在html dd元素中沒有換行符

回答

相關問題