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

w8484855@qq.com

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

$ ~. u* P' ?1 z& Y+ |) E  f- H                               
登录/注册后可看大图

9 ^0 n) R4 q: A6 Z% p4 |2、第二行只有中间图片的最有边距是5px;布局如下：
( @8 D& G1 F* g2 W7 B! D; j7 d& q

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
5 x  C/ V3 E( u  d1 w　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
$ [" y7 Y! R4 }) d# e$ L( i

                               
登录/注册后可看大图

3 `& n# Z2 q" E  i红框中的布局就是使用display:inline-block最经典的布局。

+ I3 l' |% j9 a" y/ C                               
登录/注册后可看大图

' f5 y2 G3 {1 p2 R# J2 j3 w此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
& t) Q$ v( c" Z0 ~　　此出还有一个经典的布局：

                               
登录/注册后可看大图

& b  `9 H2 y6 Y: y; W- Q2 V+ H6 B这种布局一般是：
　<div>
            <img src="" alt="">
5 Q0 u' T  W1 r, E! Y/ q            <p>
    测试勿拍
$ A  I1 j5 V- {2 K            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
0 l8 @  Z" M! R# P　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
/ g' R9 m2 v+ k2 [7 A7 l　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
" I6 S* i& {9 r% e  R- S　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
- T; ?9 v6 R; |

! H5 L. j' v2 U, _# Y8 t% u1 V& A来源：博客园
' Y  m- ]3 m* M/ p( V/ g