css多列布局实现方法大全

摘要：
$ |1 x- x( L& j+ q1 n　　多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。
; M4 r) D( o7 `$ O8 ~; {display:table
5 X' |9 ~  s. C6 A5 K1 K% k$ H代码如下:
<style>
.table {
" Q' m+ R# g8 w' E0 Mwidth: auto;
( a  Q# Z" S: W3 A- T/ Hmin-width: 1000px;
/ O# R8 O  E" W6 y  ~margin: 0 auto;
* o$ C' N, S# z0 _0 o( I& \padding: 0;
display:table;
}
0 _! K8 j& g$ Z1 E.tablerow {
display: table-row;
9 a+ ?' h" \( e2 `}
.tablecell {
. Z/ ~  {4 h/ U5 f2 \9 M, Kborder: 1px solid red;
display: table-cell;
: _; p6 C/ T9 D* R& z! Xwidth: 33%;
9 V# ^1 r5 H( i3 d& x6 y& M1 [}
0 |: A' V6 N: n$ T$ v</style>
<div class=table >
<div class=tablerow >
<div class=tablecell >
one
</div>
<div class=tablecell >
9 J  U0 s; f* }two
</div>
<div class=tablecell >
three
' n5 V( X5 ]* I  l4 l</div>
5 V  o& l2 N; P</div>
</div>
; E: b; I& `- |* [float
/ ~/ g* w. i8 s& G' Q/ s) w代码如下:
<style>
8 C; H$ t; P- N( X; F.row {
5 U( u" H2 `6 Gfloat: left;
9 ?) W& V6 e3 ^% `) I6 gwidth: 33%;
border: 1px solid red;
}
</style>
) C1 Y$ |! o" L7 J4 E% Q/ h<div class=row >
one
* E8 Z0 D. A$ [$ U( a4 {% Z</div>
<div class=row >
9 q) ^1 S& D3 N8 O' M0 C$ }+ ytwo
</div>
<div class=row >
6 P2 B# W' f- Ithree
/ s$ p, Z+ a8 H0 w+ `</div>
2 Q9 ?/ I' ^; F1 g3 O  {display: inline-block
# u2 W; w0 R& |! G- a% ^代码如下:
. ~6 g5 U8 @& ^4 n6 Y<style>
7 d* T. }( R% b8 N) d1 q$ A, z.row {
display: inline-block;
. k# q4 |* n( K% Z/ r9 x: p5 E' Y3 vwidth: 32%;
  j, q& a! P1 r$ y+ ]# t% }/ |# pborder: 1px solid red;
}
" y% K' N* Q; L; q* I</style>
6 w5 n0 N1 J0 _7 O' D<div class=row >
one
</div>
8 F! s3 z! k8 E& b2 u<div class=row >
  W4 o0 V  ]1 S- U+ E- X# Ptwo
( j7 }% S1 V& x) w' k7 M/ c$ E" d</div>
7 h( L2 k8 [5 ]7 O4 N3 v<div class=row >
three
</div>
column-count
代码如下:
% W0 r8 g4 s) u$ v. i<style>
/ p( r/ h: u) X7 j! H. L.column {
& T2 ]# q5 V$ c; i0 M# n/* 设置列数 */
# h+ [+ I' h" c-moz-column-count:3; /* firefox */
-webkit-column-count:3; /* safari and chrome */
column-count:3;
$ G5 ]9 M9 K. V) Y; f& F1 l+ |) \/* 设置列之间的间距 */
3 E" V, y" i: ^* s! I9 Q-moz-column-gap:40px; /* firefox */
0 P( W3 A7 R9 Y. L8 n3 d; ?-webkit-column-gap:40px; /* safari and chrome */
+ m, t' X. I% t2 r$ c( {column-gap:40px;
8 l" y- }# u$ W8 `& m2 ]8 I/* 设置列之间的规则 */
' J& Y/ Z8 g' v6 x) |8 s  G* x" U; U-moz-column-rule:4px outset #ff0000; /* firefox */
-webkit-column-rule:4px outset #ff0000; /* safari and chrome */
) J! w- \1 e2 A7 S; l; D0 G5 Qcolumn-rule:4px outset #ff0000;
2 X6 A% F9 y  ]4 \/ Y}
</style>
6 h2 n! j- k0 p2 h7 Z; t<div class=column></div>
小结：
/ z! n  P* V" j8 g7 y" c0 ^! y　　以上代码都是在chrome上测试，如果使用请注意兼容性，有任何问题都可以提问

更多网页制作信息请查看： 网页制作

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

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

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

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

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

cd:遮~~~~~~

…没我说话的余地…飘走