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

w8484855@qq.com

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

$ M$ n7 G1 ^7 E3 N8 z: o. V                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：

8 M, m7 y2 f6 R0 B( {' ~- ~3 g                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
# ^/ _( G: m4 y

; O/ l7 p( c. W/ N/ J0 T2 V                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
7 W7 e4 N# t* e( s% S+ j) }/ ^3 o( q; `

4 ]9 `8 E! M% Y6 X' C1 f4 Y0 i5 R! i                               
登录/注册后可看大图

这种布局一般是：
( u8 L) d+ U. [4 m5 c/ `2 `, i　<div>
/ Y4 j# V* J" T( Z& I            <img src="" alt="">
            <p>
    测试勿拍
" {9 Z4 C: l" u. y; H- v            </p>
; ?  N  [9 B- }+ z. A</div>
/ e4 P- _' T3 Y+ }& J5 y) S　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
: X7 S- X& C4 O0 C7 Q+ i9 K5 k6 G　　2. 对img进行绝对定位
2 \; o+ Y+ ]/ @" z, c/ D9 {　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
. l) y2 J4 [: m( r4 u
3 d+ h1 s: [! G7 d
2 z5 S7 P& p8 U% r来源：博客园