水平配置與 Inline block 元素的間隙

在排版的過程中,經常需要水平配置塊級元素,例如在網頁上配置四個 div 標籤如下:

  <div></div>
  <div></div>
  <div></div>
  <div></div>

設定如下的樣式:

div{
    width:100px;
    height:30px;
    border:1px solid gray;
}

這會在網頁上呈現四個垂直配置的方塊如下:


這是預設的狀況,如果要將其調整為以水平方向配置,只要設定 float:left 樣式即可,並得到以下的結果:


水平方向的配置除了flaot 樣式,也可以透過 display 設定如下:

display:inline-block;

此種設定會得到以下的結果:

 
 
 

比較以上的兩種設定你會發現,以display樣式進行水平位置的配置會導致元素之間產生間距,這在精確設定元素位置的過程中會造成一些困擾。以display: inline-block配置元素會產生間隙是因為標籤斷行所導致,要避免此種情形必須移除div標籤之間的斷行如下:

<div></div><div></div><div></div><div></div>

如此一來即可達到 float:left 設定的效果。



3 則留言:

白昱祥 提到...
作者已經移除這則留言。
白昱祥 提到...

目前有比較新的排版方式,好像叫做「彈性排版」(Flexible Box Layout)

CSS 屬性語法如下
display: -webkit-box;
display: -moz-box;
display: -ms-box;

以文中的 4 個 div 標籤為例的話
需要在外層再包一個 div 才能實現

如下範例
/*因為留言板不能使用 div 語法
因此以全形之 < > 代之*/

〈div id="DivContainer"〉
〈div id="Div1"〉〈/div〉
〈div id="Div2"〉〈/div〉
〈div id="Div3"〉〈/div〉
〈div id="Div4"〉〈/div〉
〈/div〉

#DivContainer{

border: dotted 2px blue;

display: -webkit-box;
display: -moz-box;
display: -ms-box;
}
#Div1{

background-color: #ff0000;
}
#Div2{

background-color: #00ff00;
}
#Div3{

background-color: #0000ff;
}
#Div4{

background-color: #f0f0f0;
}

不過這好像不是所有瀏覽器都適用的樣子
尤其行動裝置的瀏覽器 @@"

康廷數位文教網 提到...

關於彈性排版的議題,之前寫了一系短文在這裏可以參考一下:

http://www.kangting.tw/2013/10/css3-displayflex.html

其實傳統排版方式大致上一般網頁都夠用了,所以個人並沒有將這一組新規格用在實際的網頁開發上