Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

Drupal 相片橫向排列

Categories : 

在Drupal7中,已經內建有從前Drupal6的CCK功能

所以我們可以簡單的從內容類型 > "最新消息" 中來新增或編輯你需要呈現的欄位

但是,在圖片(相片)的呈現上,有些佈景主題可能無法自動將你的圖片自動變成橫向排列

如下圖:

這樣子,看起來似乎不太美觀,於是,只需要在CSS上動一點手腳,就可以輕鬆的解決這個問題囉!

 

Step1. Display ID & Class Details


首先先使用相關的網頁開發工具,例如Web Developer工具,瀏覽圖片呈現的ID或Class,以便下CSS語法

例如,我一開始新增的欄位機讀名稱叫做,"field_focus"

接著,只要在style.css中,加入下列這段語法,就可以讓你的圖片橫向的排列囉

div.field-name-field-focus .field-items .field-item {
display: inline;
float: left;
}

上方,有一個field-name-field-focus,這段,會隨著你的欄位命名有所變動

如果你改好了CSS也上傳到伺服器上,那你就可以看到下面這樣的畫面

是否有比原本稍回好一些呢!

知道這個方法後,你也可以試著去加入其他的CSS,像是圖片的邊框、距離等等

讓你的整個圖片呈現更為美觀喔!

大家試試看吧!

 

P.s. 以上圖片取自輔仁大學教育學院網站。

 

 

Read more about: