在排版的過程中，經常需要水平配置塊級元素，例如在網頁上配置四個 div 標籤如下：
設定如下的樣式：
這會在網頁上呈現四個垂直配置的方塊如下：
這是預設的狀況，如果要將其調整為以水平方向配置，只要設定 float:left 樣式即可，並得到以下的結果：
水平方向的配置除了flaot 樣式，也可以透過 display 設定如下：
此種設定會得到以下的結果：
比較以上的兩種設定你會發現，以display樣式進行水平位置的配置會導致元素之間產生間距，這在精確設定元素位置的過程中會造成一些困擾。以display: inline-block配置元素會產生間隙是因為標籤斷行所導致，要避免此種情形必須移除div標籤之間的斷行如下：
如此一來即可達到 float:left 設定的效果。
<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
其實傳統排版方式大致上一般網頁都夠用了，所以個人並沒有將這一組新規格用在實際的網頁開發上
張貼留言