如何在使用<figure>時使用浮動圖像，以便<figcaption>仍然顯示在圖像下？

當我使用<figure>和<figcaption>與浮動圖像，e.g如何在使用<figure>時使用浮動圖像，以便<figcaption>仍然顯示在圖像下？

<figure> 
    <img id="one" src="xxx" /> 
    <figcaption>Text</figcaption> 
</figure>

和CSS：

#one { 
    float: right; 
}

字幕的那種呆在像普通的文本，而不是根據各自<img>出現在網頁上。我如何解決這個問題？這與display有什麼關係？

來源

2016-07-25 p1xel

難道是''要上浮？或者'

'？這聽起來像'浮動'正在做它的意圖;雖然也許不是你所期待的。 –

當我嘗試浮動數字時，它什麼都沒做。可能，我設法做錯了，雖然... – p1xel

清除浮動圖像無花果，...使用'清除：正確;'或是不是問題？ –

使用clear：

figcaption { 
    clear: both; 
}

來源

2016-07-25 18:48:34 dNitro

謝謝，這至少使他們以某種方式。對齊。提出更多關於如何讓圖像符合標題的問題，但這是另一回事。 – p1xel

浮動可能會引入意料之外的文檔流問題（父容器在它們周圍塌陷;它們的浮動可能超出其預期範圍並推動其他元素出乎意料）。如果您只是試圖將<img>堆疊在<figcaption>上，則可以嘗試在CSS中將<img>元素的display屬性更改爲block。你可以閱讀更多關於CSS浮動here。

figure { 
 
    border: 2px solid #f00; 
 
    /* for illustration only */ 
 
    padding: 2px; 
 
    /* for illustration only */ 
 
} 
 
figure > img { 
 
    border: 1px solid #f0f; 
 
    /* for illustration only */ 
 
    display: block; 
 
} 
 
figcaption { 
 
    border: 1px solid #0ff; 
 
    /* for illustration only */ 
 
} 
 
#one { 
 
    /* float: right; */ 
 
}

<figure> 
 
    <img id="one" src="xxx" /> 
 
    <figcaption>Text</figcaption> 
 
</figure>

figcaption元素

來源

2016-07-25 18:26:15

如何在使用<figure>時使用浮動圖像，以便<figcaption>仍然顯示在圖像下？

回答

相關問題