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

w8484855@qq.com

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

# Y3 ^9 e4 p# e                               
登录/注册后可看大图

( a' U6 U4 d/ \! P& _) i2、第二行只有中间图片的最有边距是5px;布局如下：

/ F* u, D5 x# `+ g* h                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
! q5 C5 L5 q: i9 t: i　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
$ {6 s. F; P+ S

" R# |$ c7 p7 B6 L                               
登录/注册后可看大图

0 ]# N* g4 e1 N% S. M( Y此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
9 ~7 [# o' O- _, @

) s. {2 R! b2 W: ?4 _3 C( n                               
登录/注册后可看大图

4 G2 B' Z0 T' k, I6 W这种布局一般是：
　<div>
! p9 v# W3 @+ p( {: H            <img src="" alt="">
            <p>
    测试勿拍
+ g0 W3 J$ r" J$ f9 k( p8 o            </p>
$ i' |7 ~2 T/ c. ?! j/ N; r8 s) i</div>
' ?$ S/ W  ~2 Z6 ~3 C2 S2 G3 |0 H　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
, q( r$ ]1 `  `: G" R) |　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
& H8 O2 }: i6 s5 L$ k　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
) `! |5 X( E, ]: h2 t+ F* ?# J

8 E0 n. j2 t' e) E, g来源：博客园
$ A$ b' |1 w, ^$ h