【酷哥報報】搞不定網路中心的“行內區塊”~ 為什麼我加總100%的行內區塊還是會偷跑到行外?_不懂網路中心的小夥伴勿進

小夥伴在網路中心編輯響應式網頁時,會不會遇到搞不定“行內區塊”的窘境?如圖一,在編輯畫面中看到整齊完美的“行內區塊”排列,左(30%)、中(40%)、右(30%)。完美的比例,加總100%,不管畫面多大多小這三個區塊永遠都會依照30%、40%、30%的比例來顯示。

2019110911.jpg

(圖一 在網路中心的網頁編輯畫面中看到的“行內區塊”排列)

但是發佈之後打開網頁看。整個就變調了。如圖二本來擺得整齊完美的“行內區塊”居然偷跑到行外,跳到第二行去了。不是加總100%嗎?為什麼你要跑到外面,外面有什麼吸引你的花花草草,為什麼不安份的呆在完美的行內?

2019110912.jpg

(圖二 發佈後打開網頁看到變調的“行內區塊”排列)

小夥伴們遇到這樣的問題會如何解決?

說在前面,這裡不會一個步驟一個步驟的教小夥伴從哪裡設定“行內區塊”(inline block),不曉得網路中心的基本操作的小夥伴要自行從基本開始學習。酷哥也不是網路中心的技術高手,如果方法太笨請高手指教,但是千萬不要扯笑。

酷哥是這樣解決問題的,首先請仔細的去比較一下(圖一)跟(圖二),小夥伴是不是會發現,在圖二中,黃色的背景區塊跟綠色的背景區塊中有一點點的間距?這個間距在圖一中是沒有的。所以小夥伴就會想是不是margin(邊距)的問題,可是使用過網路中心的小夥伴應該知道在網路中心中的區塊內定的margin(邊距)都是0。那還有什麼會造成這樣的問題呢?會不會是border(邊界)的問題呢?再打開網路中心的屬性,邊界的頁籤,你會發現內定的邊界也是0。天啊,都沒給它任何邊界跟邊距的數值了,為什麼它還是硬要產生小間距,讓我的加總100%的“行內區塊”失效?

這裡就讓酷哥給小夥伴們一個小撇步,如圖三,在這些“行內區塊”的父層裡,再強調一次是父層中的文字頁籤,將“預設”的文字大小設定為0。你將會發現,發佈後再開網頁來看,如圖四你的“行內區塊”之間的小間距就不見了,區塊就乖乖的聽話,不再偷跑,跳行了。

2019110913.jpg

(圖三 屬性中的文字頁籤設定)

2019110914.jpg

(圖四 設定字體大小發佈後的行內區塊)

補充,小夥伴們會跟酷哥說,你把父層的文字大小設定為0,那子層的文字大小也會變成0,就什麼都看不到啦。拜託,子層的字變成0那就去子層把文子大小改回來就好啦。

以上酷哥的分享就到這,喜歡的小夥伴也幫酷哥在Facebook或Pixnet或你可以分享的社群分享喔。

酷哥的想像天地FACEBOOK粉絲專頁

    酷哥的想像天地 發表在 痞客邦 留言(0) 人氣()