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

w8484855@qq.com

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

# X! Q! k$ o+ L+ r                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
$ S2 Q+ f& Z5 t  {0 S

                               
登录/注册后可看大图

. d- F8 F' k. r4 W3 o" ~  Y7 Z; w注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
9 e4 ]2 Z- j# I( b5 V　　二、使用display:inline-block
9 \: U$ V) V# k, {　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
. t4 a* |# D, M7 c- I7 d

                               
登录/注册后可看大图

/ [- s1 ^. n/ ^, s( B3 b4 ?红框中的布局就是使用display:inline-block最经典的布局。

  J! ~- u& C! |2 X4 C( g' x5 D                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
8 [4 e' l; h/ I  t　　此出还有一个经典的布局：
$ q$ s3 u  K& y3 f/ T1 u

                               
登录/注册后可看大图

2 o: f6 m9 V" b! E这种布局一般是：
　<div>
9 G' F- d/ x2 J9 T% k            <img src="" alt="">
            <p>
% j9 a" V3 D$ ^    测试勿拍
  H: b8 ]/ M- N7 E            </p>
* A' U) l( k: H</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
  ~& z8 S- p4 f8 j; z　　1. 对div进行相对定位
　　2. 对img进行绝对定位
3 Y( X+ ^% f% g5 q- m* f　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
- U9 J- V2 S- l　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
% Y( S( c' k* }: R/ X4 c
$ k5 |& s7 p  Z( O
0 v( S  o) v& z- J来源：博客园
7 B- _- L: d4 B