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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
9 f! d8 f' h; h# c! C　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
* Y3 |  E, L# H$ u' R* o+ p

. \( Q' i8 H: }. V5 P3 @0 \1 O* I; c                               
登录/注册后可看大图

) V; U( H, C; w2、第二行只有中间图片的最有边距是5px;布局如下：
0 l1 u* P# W9 |1 t" u( Q# f

                               
登录/注册后可看大图

: Z8 U! Z, p5 c/ [注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
9 C' {* G. e, v8 r- L" |　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
7 {. K  W2 c( \$ j. b

( p7 c4 {: c5 Z* l% z3 ~' j                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
; G$ a2 c1 j5 c　　此出还有一个经典的布局：
3 y. g/ k7 Y3 o3 R# \  T

- o, f$ k; X' X, F. j' |) n! F% q' c                               
登录/注册后可看大图

这种布局一般是：
4 |$ {# |4 [9 c6 @1 M, p$ H- k　<div>
/ M- C+ n4 N! c, H            <img src="" alt="">
            <p>
    测试勿拍
' Y( o/ h( k1 z) L            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
+ P. ?8 L! g( V, F& O4 X! _　　1. 对div进行相对定位
; u3 K3 c) l% c7 @$ }　　2. 对img进行绝对定位
　　3. p进行相对定位
$ K# }# O/ b6 m9 _- }( w　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
  R! V2 u+ ~; |; R. q　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
* w9 T  T7 Q$ K( }