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

w8484855@qq.com

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

                               
登录/注册后可看大图

4 d& w5 L( J- x+ j  W2、第二行只有中间图片的最有边距是5px;布局如下：

                               
登录/注册后可看大图

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

* I; l" k8 B9 p" s                               
登录/注册后可看大图

. y" j# j: j: b' [6 X红框中的布局就是使用display:inline-block最经典的布局。

/ c) a3 o& U* K1 g# R  X                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
" ?! R2 w& o% ]( C

                               
登录/注册后可看大图

这种布局一般是：
: f$ Q% o3 F: I　<div>
+ w6 H. x7 P' W! E6 z/ p: j3 V            <img src="" alt="">
$ q7 L& `3 Z/ g6 G            <p>
  M" ~2 L+ j: q    测试勿拍
% X1 c: C3 }3 `' L' |7 |# T6 _            </p>
$ g  i, V* T# c7 Y2 T</div>
) n- q- n/ t+ [$ L- G8 }7 K　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
0 @, a! A- ^% ]6 f　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
$ D; l7 o4 U) x: P+ j! P　　三、使用flexible box实现 真正意义上的流体布局
1 b4 }* \! g+ U+ D) G3 d% @　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
# f) C  O- }0 l1 a% q$ K" X
5 X8 o9 R( w# d9 j) u
来源：博客园
' R/ ?$ n8 e- s9 r& ?; e8 L