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

w8484855@qq.com

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

) b: `( y" t  K" C                               
登录/注册后可看大图

% i6 A8 f" {! o1 B8 T2 E1 E2、第二行只有中间图片的最有边距是5px;布局如下：

8 D1 A& b& }$ V7 b                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
5 h3 M8 o9 {. j6 y9 A3 {　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
/ k3 |- k2 q8 p% m+ p( t3 v2 ]2 L

, [: t7 b2 w: x  B+ E                               
登录/注册后可看大图

# A+ f2 a/ R( F1 O红框中的布局就是使用display:inline-block最经典的布局。
  V1 i4 K1 W# A% t5 ^, s1 C% _

0 j! M; q* ~3 K1 l                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
2 n+ Q. }& i* T# z　　此出还有一个经典的布局：

                               
登录/注册后可看大图

8 y, C; ^  _3 }, G/ |  o这种布局一般是：
) B) S4 f0 G( B# m; k% B$ Z　<div>
            <img src="" alt="">
            <p>
    测试勿拍
) O0 _$ ^; n, X$ X# L            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
& {9 e; m" s" S% ~　　2. 对img进行绝对定位
2 O) {" E- g# P; P; a' ^* j+ }　　3. p进行相对定位
& h9 M; L% \& \6 Q3 U# B  `+ {$ M　　注：固定宽度列的高度>自适应宽度列？
4 O# l5 a4 K4 k' w$ b　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
, B" {" [4 |& ~1 R0 U9 r

来源：博客园
1 N/ `. @  X" v