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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
  D! S+ D" q0 `! h8 i1 ^　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
" A9 b: A) Y7 i$ C2 U+ x" s: X

  B: T% `4 ~. p! }9 g  h. o4 H' F                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：

- c) z, M4 s; l! f# o                               
登录/注册后可看大图

) ^( Q8 ]/ X" O5 P% i) x0 [注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
$ G! M, X% N" C8 Y3 m' O% ]* i　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
" t  O* M, {  z6 d

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
$ P4 t1 Y$ N: X- p+ J* g9 y2 G& K8 T

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
5 e; f3 y# k9 @& l8 _% I+ L　　此出还有一个经典的布局：
; J+ z5 W+ U& {; R9 J3 `

; W4 O! I" m) ]- s( L1 O  J                               
登录/注册后可看大图

: ~( |2 m" u( r0 @这种布局一般是：
9 h5 ~( a( e) E( A$ I4 @　<div>
            <img src="" alt="">
            <p>
    测试勿拍
            </p>
/ v& A! k/ `5 k& c</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
$ M2 }3 M# p! A1 s! `" X! `* F　　1. 对div进行相对定位
　　2. 对img进行绝对定位
$ l& W; X) J( y8 j  x6 l5 ?　　3. p进行相对定位
* ^0 \0 J) ~8 x6 G' u　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
& b2 U0 X% O- A5 q　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


" r# a' [$ M! P# e来源：博客园