[CSS] 解決在圖片上使用 float 時,無法撐開容器的問題。(適用 IE )
文繞圖是常見的版面設計方式,如下:
語法也很簡單:
<div>
<img src="..." style="float:right;" />
文字內容
</div>
但是,當文字較少時,就會發生圖片比 div 大,但是圖片卻無法將 div 撐開的情形,如下:
這時候就要靠一種叫 clearfix 的密技(hack),語法如下:
<div style="overflow:auto;zoom:1;">
<img src="..." style="float:right;" />
文字內容
</div>
這樣就可以將 div 撐開了。 完整範例
語法也很簡單:
<div>
<img src="..." style="float:right;" />
文字內容
</div>
但是,當文字較少時,就會發生圖片比 div 大,但是圖片卻無法將 div 撐開的情形,如下:
這時候就要靠一種叫 clearfix 的密技(hack),語法如下:
<div style="overflow:auto;zoom:1;">
<img src="..." style="float:right;" />
文字內容
</div>
這樣就可以將 div 撐開了。 完整範例