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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：

                               
登录/注册后可看大图

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

/ |( @" b) K: B) S. d+ M- J                               
登录/注册后可看大图

, w; k) I3 {4 C4 j  }; E* }注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
9 Z8 L+ L: M. B　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
: r9 x# F! m# D4 v$ ~; R+ |4 ~& }, n( I

8 @" Q2 B2 c2 P$ b8 X) N  Q3 c                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
) D8 V; h1 I# R# A0 ]7 r

0 m5 z* m6 U! r+ M# T8 V                               
登录/注册后可看大图

# g2 m0 ~. d8 c, h# f4 c此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：

$ Y. {9 Y. |9 g4 o4 {4 T) P                               
登录/注册后可看大图

0 ]' H" ~: R6 |. t1 ]这种布局一般是：
　<div>
            <img src="" alt="">
9 @( ^& W# W: Z; ?9 {+ @6 p            <p>
    测试勿拍
            </p>
</div>
  O& \* |9 K/ D, t: u. Z　　使用定位position:absolute常用于左边固定，右边自适应的情况。
0 [/ Q, N. X# p. W) Y7 \　　1. 对div进行相对定位
$ j) E1 D0 m2 d# X# z, S　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
8 g! {9 q$ N' W. C　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
1 W* Q& S! \- ]* c' `