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

w8484855@qq.com

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

                               
登录/注册后可看大图

" y9 H  k, c( X# ?% ?0 H2、第二行只有中间图片的最有边距是5px;布局如下：

: G. X6 s0 `( e1 P5 O9 _5 }                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

1 x5 [/ E$ G  @9 o3 l" ^                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
$ K0 U: G2 p" N7 V, h　　此出还有一个经典的布局：
2 R. O5 J% k9 `! m; s" ]- g& I

                               
登录/注册后可看大图

这种布局一般是：
: x- {& b; c( g. t- E, A! N　<div>
8 W1 C' h2 u4 E/ V/ ?+ h            <img src="" alt="">
( C$ ?! C# n5 w            <p>
2 S/ a# o: |/ P  _# R    测试勿拍
            </p>
</div>
+ G& g& n/ @  m* c% B% D　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
: E2 q( ?- C" y5 d　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
7 p9 O" X7 R. N% P. y: d8 g; d" r　　三、使用flexible box实现 真正意义上的流体布局
4 @( C% Z4 l. c4 {$ }: r" [　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

& w: P. a; u  M: f$ f
# F' ^7 s; y% x. Z! R9 d8 Q0 V来源：博客园
" i  L* }5 q; O+ |& T