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

w8484855@qq.com

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

                               
登录/注册后可看大图

8 N0 H# v: \# l2、第二行只有中间图片的最有边距是5px;布局如下：

, s# o, W* I. H7 t2 ~; H) P                               
登录/注册后可看大图

9 x: f( u5 N8 R1 v, G% r% ^注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
& A. {: P+ V: M3 J/ K7 b　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
( c$ a( Q6 n" s1 i- A3 t# w

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
7 L1 K- k4 [7 w, g4 T

: U0 T& `9 S2 S                               
登录/注册后可看大图

) Q+ ^4 |$ H* h3 U  X& Z* I$ u) m此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
% `+ U& Z; K- P6 I　　此出还有一个经典的布局：

# `9 n. b) `, U3 ~( I                               
登录/注册后可看大图

! t2 P8 D  ~3 c0 I这种布局一般是：
　<div>
9 ~7 |4 v; n  Y) l+ f4 ~" M% y2 _            <img src="" alt="">
            <p>
    测试勿拍
            </p>
</div>
& K: C& ]0 w  q: q5 x8 L. g9 N: M　　使用定位position:absolute常用于左边固定，右边自适应的情况。
3 @. @5 u: p) V0 @2 G: R  g　　1. 对div进行相对定位
　　2. 对img进行绝对定位
- g7 A( S/ D1 @+ f/ d　　3. p进行相对定位
' e' I) i' E" q. r! J6 H* @　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

$ J! A: @6 j) V+ f, M# M# I$ x+ I
* ]4 m2 h9 d% w' f  E( P% p来源：博客园
4 R3 g2 O) G" n2 Y) X. |* \