為什麼這篇inline block排版鄉民發文收入到精華區：因為在inline block排版這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者sin282 (@興...)看板Web_Design標題[問題] CSS inline-bloc...
http://codepen.io/anon/pen/jHoGz
以上是我排出來的區塊....請各位幫幫我
我原本是想要排出上面那樣一列為兩大區塊
而每個區塊(以下簡稱 BlockA)為左右兩邊,一邊為圖一邊為文字
但實際弄出來div會一直跳,不太知道到底為什麼會這樣
問題一、為什麼help與文字中間會自動跑出縫隙(約3px),可以左右區塊相連嗎?
需要時我再自己加padding or div
問題二、為什麼右邊文字區塊會向下突出,而不是並排
自行測試的方法
在.test class加上 float:left;上面的問題都會消失.因為都靠左排列了
所以現在自己理解成任何狀況都試著加float:left; 靠左 去解決問題.
問題三、不靠float:left只單純靠display可以排出原本需求的版型嗎?
我試了好久看了很多. 但頭腦轉不太過來 請大家提示我一下,萬分感謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.210.231.212
※ 編輯: sin282 來自: 218.210.231.212 (02/01 10:20)
推 awashharp:一、因為兩塊inline-block之間有空白跟斷行字元導致間距 02/01 10:25
→ awashharp:可以用滑鼠確認中間有個空白字元存在 02/01 10:25
→ awashharp:簡單的解法就是用<!-- -->將空白跟換行註解掉 02/01 10:26
→ awashharp:二、向下禿出也是因為inline的特性，有看到"我是內文"跟 02/01 10:27
→ awashharp:左邊的圖案對齊嗎？那就是因為inline要對齊bottom line 02/01 10:28
→ awashharp:簡單解法就是設定vertical-align: top;就可以了 02/01 10:28
→ awashharp:三、上面的解法沒碰到float，應該是你要求的版型吧XD? 02/01 10:30
→ sin282:YA~ 謝謝您 02/01 10:32
→ sin282:我心中有好多個為什麼~ 想知道FLOAT和DISPLAY都可達成時 02/01 10:33
→ sin282:現在比較多人使用的會是哪個. FLOAT要加clear:both 02/01 10:34
推 awashharp:inline-block因為在IE6,IE7支援度差，要額外寫CSS Hack 02/01 10:36
→ awashharp:可能float會是大家普遍會選的方法吧XD 02/01 10:36
推 shimuraken:FLOAT比較彈性啊，如果你今天要把區塊左右調換，把兩個 02/01 10:41
→ shimuraken:區塊的FLOAT調整一下就可以了。 02/01 10:41
→ sin282:WOWOWO! THX 02/01 10:57
→ musie:float的缺點可以靠clearfix這項技巧解決.. 02/01 10:59
→ musie:所以基本上大家都是用float搭配clearfix做gird設計 02/01 11:00
→ musie:grid 02/01 11:00
→ sin282:需要再找時間研究一下clearfix 和float還有clear的關係 02/01 11:16
→ sin282:感謝各位 02/01 11:17
推 shimuraken:clearfix:after在IE上好像不相容.. 02/01 11:21
→ musie:基本上clearfix會寫成一個class 02/01 11:29
→ sin282:.問個小問題. 像我這次做的這個範例. 實際應用在Web中延續 02/01 11:32
→ sin282:我用ie8 Firefox看都沒有問題. 是因為太單純. 所以不會需要 02/01 11:33
→ sin282:用到clearfix的修飾. 還是其實我這個還是有問題@.@ 02/01 11:33
推 awashharp:不需要clearfix是因為沒有使用float的元素吧？ 02/01 11:34
→ sin282:我採用float:left 在各個大區塊中, 網頁沒有破版 02/01 11:35
→ sin282:WO. 我加的DIV CLEAR:BOTH...就好像是一個解法... 02/01 11:36
推 musie:樓上那篇的css hack用的不好..有更好的hack方式 02/01 11:42
→ sin282:傻子如我現在完全無法理解好壞~ 但一行一行看大概明白意思 02/01 11:48
→ sin282:需要一步一腳印儲存進腦海!! 要不然又像以前一樣曚對了 02/01 11:53
→ sin282:但不知道為什麼對,只知道用就對了 02/01 11:53