站內搜尋

Thursday, May 8, 2014

[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 撐開了。 完整範例

No comments:

Post a Comment