css多列布局实现方法大全

摘要：
1 K3 l- T3 {; t. T: {/ v0 M! S+ f　　多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。
( R+ e' H* m' f, x/ I+ r. J$ e9 g$ `display:table
代码如下:
7 d2 P' P/ K( [* S- @* o9 a# p8 ]<style>
.table {
width: auto;
% {$ E5 G$ t. Y+ D- ^min-width: 1000px;
margin: 0 auto;
padding: 0;
8 V0 J3 C4 E) |2 a3 cdisplay:table;
  n) j8 T6 f. C$ F* n}
.tablerow {
( c' A/ c: ^% R4 A( udisplay: table-row;
}
) K2 Q: x" t. _( `  O.tablecell {
$ G% k; D3 h2 [) }$ h2 r: J; x. L& Bborder: 1px solid red;
9 ]9 Q0 N6 z2 m/ ddisplay: table-cell;
width: 33%;
}
( k: t+ Z  R% @" M( Z" o</style>
# C& Q, d" M& M; U<div class=table >
5 @4 A7 {6 p1 O+ I, Z<div class=tablerow >
/ B- m7 d, k. t* q8 N<div class=tablecell >
) S" _7 a4 A$ D( f% jone
: q* V6 o! W8 }</div>
' ^3 o4 }! s6 L& d. ~6 R; {<div class=tablecell >
" y8 `7 q' j2 c. J7 ytwo
4 m9 O4 h) l+ X</div>
0 g1 W& X3 \1 A0 V# P<div class=tablecell >
three
</div>
</div>
</div>
float
代码如下:
* E2 O& c% q6 o9 N0 n4 t<style>
.row {
float: left;
5 n! f$ _3 V7 o& _6 M& [7 Jwidth: 33%;
$ U! N2 o" k3 E" Qborder: 1px solid red;
}
</style>
% R% N5 k& O( O8 b% V! w2 N<div class=row >
4 K7 c( P' i% \3 [6 u, E- Fone
: j& G6 G! D2 ~/ S  P9 _" {9 I</div>
<div class=row >
two
</div>
<div class=row >
three
: B9 I7 g) x4 i& b/ t& Q) u  m</div>
display: inline-block
2 l2 y6 P4 w9 K! J% c4 B0 Y/ Y0 u, Q代码如下:
<style>
8 T1 ^+ }- I# }- \9 w* i) ^. ]2 L.row {
display: inline-block;
width: 32%;
border: 1px solid red;
}
/ R: j) t* R: [' h( Q</style>
+ \7 d& A6 p! A2 E2 c<div class=row >
one
# ?. [2 B* t: W( N% Q/ p</div>
" o( a5 L0 S; n7 t: w, }<div class=row >
two
+ ~+ V& z) F* _% Z# }</div>
3 F5 X: p$ m# M5 Z4 w<div class=row >
% N6 _$ T  u8 f0 g# z& z3 A- |three
</div>
column-count
代码如下:
6 h& I9 @1 ~" i9 }<style>
9 h  J6 y. Z) y- {& a.column {
/* 设置列数 */
" k8 [0 f2 I# I# x! U" r-moz-column-count:3; /* firefox */
-webkit-column-count:3; /* safari and chrome */
; x8 L5 A+ _) i0 l; d2 ?column-count:3;
( R% y+ ~* Z$ Y% o7 m( m$ S/* 设置列之间的间距 */
-moz-column-gap:40px; /* firefox */
-webkit-column-gap:40px; /* safari and chrome */
column-gap:40px;
/* 设置列之间的规则 */
; z# R$ G3 G: F-moz-column-rule:4px outset #ff0000; /* firefox */
- I# N! `+ _. R& R* D-webkit-column-rule:4px outset #ff0000; /* safari and chrome */
column-rule:4px outset #ff0000;
: \. z6 ^: t- W- Z" E1 R$ d}
6 Z6 i/ _- f+ @- u( M6 S) K</style>
; z4 }; W/ o& H' \/ g<div class=column></div>
小结：
1 |9 x7 L9 V+ n　　以上代码都是在chrome上测试，如果使用请注意兼容性，有任何问题都可以提问
9 b+ @+ m; T4 z1 D) v
更多网页制作信息请查看： 网页制作

本人是文盲，以上内容文字均不认识，也看不懂是什么意思.

感谢党和人民的关爱~~~

做为老人！在吧里我都懒的都不想说话！送完经验我就走！

感觉这个论坛的站长太牛B了，好强大啊

小手一抖，经验到手！手拿酱油，低头猛走！酱油党路过，杜绝零回复

cd:遮~~~~~~

…没我说话的余地…飘走