CSS实现横列布局的方法总结

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
0 R1 q! C8 k; a5 y' ]+ d　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
0 e: Z2 e/ _4 f- r- b' I

                               
登录/注册后可看大图

9 f: U1 U! u( s8 C2、第二行只有中间图片的最有边距是5px;布局如下：
4 ^2 ~: }- v4 e2 `# }( L

1 Z" C( B1 {/ X                               
登录/注册后可看大图

# |* R, I1 Q0 b2 O- {: O注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
1 l$ q3 Q7 j, z4 o2 T: k　　二、使用display:inline-block
) }/ h( s8 _8 D: c. }% C　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

6 T* R, C: o! R' a( C0 n" c                               
登录/注册后可看大图

6 ?9 Z) F" l+ K& {红框中的布局就是使用display:inline-block最经典的布局。
. H; M9 h2 Z  x5 I* k" V$ V. k

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
8 ]+ I, }$ N/ ~　　此出还有一个经典的布局：
2 d( o: W" w' F0 C, [- b3 y

                               
登录/注册后可看大图

这种布局一般是：
5 J; `5 l: D# Q3 q  i- u1 r　<div>
            <img src="" alt="">
7 r/ f% G4 q- ]$ }. o  e) ]            <p>
    测试勿拍
            </p>
( b& V; M, N- l1 y- n3 _& R- ]; U</div>
5 r6 O0 S3 H, x% u6 X: c/ L3 i　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
! f- v% F  K) v4 @+ S. q0 ?　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
. H8 U. \2 V$ ^/ ^- o, i　　三、使用flexible box实现 真正意义上的流体布局
  s1 t! u/ t6 |- n5 ^4 @　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
. U5 b. W% W* v

' y5 P! h" @, X, a2 p$ N% b) u" u来源：博客园