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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
! j" ]/ b- q- ]! |; c3 Z　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
5 p& `- v' n: u, t

: r4 l; p4 O( V0 c0 c                               
登录/注册后可看大图

5 W; P' g# ^  }9 Y6 G0 u4 {" _2、第二行只有中间图片的最有边距是5px;布局如下：

5 w, i1 J7 D6 k& J* T# B3 q# N: b; q                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
2 b- N# K, \3 v　　二、使用display:inline-block
4 {' ^1 T9 p5 G% _: P* v　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

0 [8 b, G) F) x7 |" z                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
8 @1 V3 n" ]4 \- o$ w- b　　此出还有一个经典的布局：
9 W4 Q7 i. o0 `: H) T- q- Z2 E9 t4 {

9 z& E, G3 M$ Z+ ]5 V                               
登录/注册后可看大图

  {, v1 Y" y- Q这种布局一般是：
　<div>
( ^* ~6 O3 c" e( S            <img src="" alt="">
            <p>
    测试勿拍
            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
7 n) B6 S1 Q) [7 B( Y2 v$ G5 P　　1. 对div进行相对定位
　　2. 对img进行绝对定位
( ?& {. d9 c5 F* i8 |* j; }　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
2 H! k$ m8 ?  h. i( ~6 u* {+ T0 f　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
9 Q0 `! [8 q; z- l4 I" s, ^) {
- a/ c5 a  u! }& J) |
来源：博客园
$ g( z& s* W+ t2 s) K0 O: ~) ^, W