隱私權聲明
本公司關心使用者隱私權與個人資訊,並遵守本公司的網站隱私政策,使用者若有任何問題,可以參考本公司的「網站隱私政策」,或利用電子郵件或連絡電話詢問本公司.
2013
11
13

CSS排版 inline-block與inline

關鍵字:網頁設計網頁設計作品

嘿!相信許多人經常為了列表頁的排列寫了許多的CSS。
最常見到的相信一定是利用float浮動來使列表頁置左顯示排列,可是float卻總是有一個惱人的地方!就是當你每個列表的高度不同時,CSS會非常假會的幫你自動偵測上一排最高高度的列表作為下一排的基準點,而且沒有辦法解決這個問題,經常為了這問題寫了幾十行的CSS都沒有辦法解決,接下來介紹一組CSS,讓各位輕輕鬆鬆寫好列表頁!

放比較圖:

利用下圖可以很明顯看到float有點假會,為什麼不能像inlin-block一樣在別人的下方開始呢!!!!


以下提供CSS寫法:

HTML CODE:
<div class="wallper">
<div class="title">CSS-<span class="colorRed">float:left</span></div>
<div class="listBlock listBlock01">
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表</div>
</div>
</div>

<div class="wallper">
<div class="title">CSS-<span class="colorRed">dispaly:inline-block</span>與class="colorRed">dispaly:inline </span></div>
<div class="listBlock listBlock01">
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list02">我是列表我是列表我是列表我是列表我是列表我是列表我是列表</div>
<div class="list list01">我是列表我是列表我是列表我是列表</div>
</div>
</div>

CSS CODE:

body {
margin:0;
padding:0;
font-size:12px;
font-family:"微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif, "新細明體";
line-height:20px;
}


/*------------- 黑色內容區塊 ------------*/

.wallper {
width:600px;
background:#000000
margin:0 auto;
padding:0 50px 50px 50px;
overflow:hidden;
}


/*------------- 標題 ------------*/

.wallper .title {
width:560px;
background:#069;
color:#FFFFFF;
font-size:18px;
line-height:24px;
padding:20px;
}


/*------------- 選單區塊 ------------*/

.wallper .listBlock {
width:600px;
margin:0 auto;
overflow:hidden;
}


/*------------- 列表_文字設定 ------------*/

.wallper .listBlock .list {
width:160px;
color:#FFFFFF;
padding:10px 20px;
}


/*------------- 列表_背景顏色設定 ------------*/

.wallper .listBlock .list01 {
background:#CC0000
}


.wallper .listBlock .list02 {
background:#336600
}


/*------------- 列表_float ------------*/

.wallper .listBlock01 .list {
float:left;
margin:0 0 30px 0;
}


/*------------- 列表_inline-block ------------*/

.wallper .listBlock02 .list {
display:inline-block;
/*-- 使列表置上對齊 --*/
vertical-align:top;
margin:0 -3px 30px 0;
}


/*------------- 紅色文字 ------------*/

.colorRed {
color:#FFCC00
}


不過IE並不支援inline-block這個CSS,所以我們再針對IE來做解決
/*------------- 列表_針對IE解決問題 ------------*/

.wallper .listBlock02 .list {

/*-- for IE --*/
*display:inline;
*margin:0;
}



各位算算看,加上針對IE的兩行CSS,是不是只要寫8行就決了呢!
如果用float還要再針對列表內的各個區塊本身去寫CSS,挺麻煩的,inline-block快速解決了我們的問題!
不過所有的CSS沒有絕對一定要使用哪種寫法,必須要依各種情況來寫不同種的CSS來應對所以inline-block也不是一種絕對的方法唷!
你可能有興趣的作品案例
傑立資訊傑立資訊事業有限公司
Powered by AWS Cloud Computing

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map

© 2019 傑立資訊 All rights reserved.| 網站隱私政策

線上詢價