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

w8484855@qq.com

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

8 W2 p' C$ Q; O" G2 c3 I1 J                               
登录/注册后可看大图

9 i% S- L$ b  c4 f4 }3 [2 O2、第二行只有中间图片的最有边距是5px;布局如下：
% Q, z( K# h4 A% R  _- p) ?

. R! `7 N: s0 n5 Y7 ?4 x0 A                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

4 r% e& F' s1 u7 }5 H$ q红框中的布局就是使用display:inline-block最经典的布局。

+ E4 _* q" S9 S7 b9 q- j$ m                               
登录/注册后可看大图

2 Y+ u; L0 M% r2 ^* g+ p' o此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：

                               
登录/注册后可看大图

这种布局一般是：
8 e  J* P8 m, G# I% A# f　<div>
            <img src="" alt="">
            <p>
    测试勿拍
2 {8 t/ m' M# ~9 x" F$ T3 V            </p>
) x, B: u: j# e7 u</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
* u0 I8 }6 p/ Q( J　　1. 对div进行相对定位
8 A6 x4 @" H/ {/ R  }　　2. 对img进行绝对定位
( o2 F) v) g1 D　　3. p进行相对定位
7 t2 e; l4 @" l, k6 {% O8 s　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

& [3 m& L/ F% M( K
来源：博客园
  \# {7 M+ v$ D: t