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

w8484855@qq.com

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

+ ?: n8 l  S4 C4 Z4 T) W& ?                               
登录/注册后可看大图

/ b7 E0 B5 ~4 [* ]1 m, }! v2、第二行只有中间图片的最有边距是5px;布局如下：
. V1 W+ o  f1 X4 G: o7 Q  N" Q

  b, h" m% g; F                               
登录/注册后可看大图

! M  w6 B4 F0 r# p. i注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
1 C! Z1 j* s6 o4 P% |3 f　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
% E8 t* C' t( R  r+ C) ?

                               
登录/注册后可看大图

! y* L1 c/ ^' L2 z. E红框中的布局就是使用display:inline-block最经典的布局。

2 Y3 Q5 j+ i- s5 x                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
- W4 X3 t5 {: ]' |

                               
登录/注册后可看大图

这种布局一般是：
　<div>
            <img src="" alt="">
, _6 f; X- K1 L8 k* C: d            <p>
: z: r7 g6 d' r9 q    测试勿拍
+ i( Q/ G, @8 o+ n1 V6 l            </p>
</div>
2 U% z( a, p4 f! @1 G& e& W$ Z7 M) Y　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
, f. J0 l* D  E2 l/ |/ X+ |　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

9 j: H/ h' m, M' Q, p1 }
来源：博客园