以為 CSS 設計師的眼睛要變成方的
CSS 才會寫的好 = =
因為對於 HTML 來說每個區塊都是方的
在區塊間你推我、我擠你的過程中 網頁就顯示好了
這真的是太神奇不是嗎
但今天要說的是一個不按牌理出牌腳色
首先我們先來看看這個應用
這是很基本的 Profile 架構左邊放張大頭照、右邊寫點文字
我們可以這樣子寫
<style>
.profile {}
.profile .photo {float:left; width:150px; height:150px}
.profile .note {float:left; width:400px} // .clearfix 省略
</style>
<div class='profile clearfix'>
<div class='photo'> <img src='photo.jpg' /> </div>
<div class='note'> 文字部分 </div>
</div>
其實這樣寫基本沒有甚麼問題
我們可以利用 浮動 (Float) 將圖片與文字區塊設定好寬度後都靠左如此這般這不就搞定了嗎？
可是事情永遠沒有想的這樣簡單
計畫永遠趕不上變化
如果畫面的寬度被調整
這會變成怎麼樣呢
我們可以看到 .profile 這個區塊並沒設寬度
而 div 屬 block 元素，寬度會被母元素限制
因此只要整體寬度有變動
假設在大頭照在長寬相同的情況下
- 變大，因設定寬度的 .note 文字部分右邊就會空出很多空間
- 變小，.note 會因為空間不夠而擠到圖片下面
每次調整寬度都像是場地獄
整天調寬度就飽啦，可能還有一堆漏掉的
光檢查就搞死人了還寫個屁啊？
正當我忿忿然的想這件事時
突然有幾個想法飄過
<div> 設浮動後，除指定大小外，寬高不是隨內容物變大縮小嗎？
通常都是文字區塊的部分需調整寬高，如果不加上浮動與寬度的話，他的範圍是不是也還受到母元素的限制呢？
也因此我改成這樣把 .note 樣式全拿掉
<style>
.profile {}
.profile .photo {float:left; width:150px; height:150px}
.profile .note {} // clearfix 省略
</style>
<div class='profile clearfix'>
<div class='photo'> <img src='photo.jpg' /> </div>
<div class='note'> 文字部分 </div>
</div>
正當按下 F5 的那一刻，我真的感動得快哭了這不就是我一直在尋找的效果嗎？
終於可以告別在那邊微調寬度的苦差
大頭照簡單設了 margin-right 讓他與文字空開點後 ...etc也沒有特別搞懂為甚麼可以
我就開心的下班了 (唉呦，有時候就是懶惰碼)
果然好景不長，這種寫法還是有點問題
在文字部分如果很長的話，也就是高度很高的情況下
畫面變成了這樣
文字區塊，快放開那張圖片你到底想要把觸手伸到哪裡去 ( 誤 = = )
程式範例：http://jsfiddle.net/culaido/3XyyS/
咳咳，以上是不負責任發言
事實上這是叫文繞圖
在不經意的情況下被試了出來
雖然文繞圖也是常見的顯示方式
但這不是我要的效果~~~
這以區塊來看大頭照 與 文字區塊 重疊在一起
重疊部分的文字被圖片推開了
難道我又得走回設寬度的老路嗎？好不容易找到的好解法要放棄掉嗎？
正當我煩搞之際我又想到一件事
以前的人很喜歡用 overflow 來清除浮動
又看到 W3C 規格書的這段
9.4.1 Block formatting contexts
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
規格書說白了意思就是 浮動 的區塊會與 相鄰非浮動
或 overflow 不為 visible 的區塊相重疊 ( 規格書最大~~ 其實最大的是瀏覽器 = = )也因此我在 .note 加上樣式 overflow:hidden
這樣文字區塊就不會與圖片重疊
就是當初要的效果啦
這是我的成果範例 http://jsfiddle.net/culaido/nmBJa/
又是故事結束的時候，感謝收看本期的內容並敬請期待下期 CSS 的故事: 說好的不寫寬度呢？那些 inline-block 區塊的處理方式
=============== 我是不可思議分隔線 ===============
在 CSS 架構設計上怎樣才是好的，實際上這並沒有定論畢竟有非常多門派與方法
也是個非常主觀又跟畫面有非常大的相關
- 一般工程師對此也不太重視 ( 畫畫甚麼的要了我的命 )
- 一般美術設計也對此一知半解 ( 程式？那是甚麼我不會 )
但我給自己訂了一個方法好壞的評斷規則之一 ( 註1 )
能夠適應各種變化的 CSS 就是好的設計 (註2)
註： 寫 CSS 的準則，因為這方面沒多少專家，因此我訂了幾條準則，來避免可能發生的錯誤
因為我很懶，壓根不想回去改他 ^^
沒有留言:
張貼留言