iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
0
Modern Web

菜鳥前端奮鬥史(欸?系列 第 11

Day11 「所以 float 能幹嘛」 ─ 簡單的文字繞圖排版

  • 分享至 

  • xImage
  •  

明天再來補內文
結果一個跨年卡了三篇文章還沒有內容,開始欠債真的好恐怖啊啊啊/images/emoticon/emoticon04.gif


今天要來接續昨天上一次的主題 ─ float
來看看實務上哪些常看到的 float 應用吧!

文字繞圖

雖然現在好像很少看到這類的應用了,不過在書報雜誌排版上還是有時會瞄到
我自己是幾乎沒在用這樣的版型,一時之間要寫 demo 還一直寫不出來...
https://ithelp.ithome.com.tw/upload/images/20180102/2010764078jMUfouV3.png
文繞圖 demo

比較需要注意的是,要被環繞的物件(div、img...等)必須在文字之前
若在文字後,如下

<p>我是文字我是文字我是文字我是文字我是文字我是文字</p>
<img src="我懶得想路徑了">

則無法讓文字正確地繞行圖片唷!
會變成這樣的畫面
https://ithelp.ithome.com.tw/upload/images/20180102/20107640lqYNlvYD7f.png
文繞圖 error demo

欸?為什麼上面那張圖的 .box 沒有被 img 撐開咧?好奇怪呀

欸都,別急,我們下一篇繼續來介紹這個吧.. (又偷懶分一篇/images/emoticon/emoticon01.gif


>>隊友任意門<<

我是小菜鳥阿陰,我們下次見!


上一篇
Day10 「浮動?我也會漂浮?」 ─ 淺談 float 浮動效果
下一篇
Day12 「版面用 float 怎麼不如預期?」 ─ 孩子,記得清除浮動呀
系列文
菜鳥前端奮鬥史(欸?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言