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

w8484855@qq.com

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

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
( Y3 M% L. ~9 g1 h8 k

6 Y& N0 Y, u: ^. R% d                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
( J9 F7 @4 _  ]7 f　　二、使用display:inline-block
6 d8 w! l1 _1 R  V* f; g  F　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
( r' ?6 ]# Y# t* G% p

                               
登录/注册后可看大图

& R+ t: _. K1 e& |红框中的布局就是使用display:inline-block最经典的布局。
5 J6 S; c4 e2 @

                               
登录/注册后可看大图

$ ]: T% y' G) Z: x4 ?0 u4 U此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
# u1 b/ q% g% S% {/ v　　此出还有一个经典的布局：
# N. K0 h  D' N5 F

# @/ p! `( B1 a0 ^                               
登录/注册后可看大图

这种布局一般是：
　<div>
            <img src="" alt="">
            <p>
    测试勿拍
            </p>
( T# P( S$ B+ S$ s( t5 F/ C- ?) [  Y</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
: ~/ n: V4 D2 n( R" R! M  V　　2. 对img进行绝对定位
( n# H! g9 W. Z: C7 [5 \　　3. p进行相对定位
1 ~2 B3 H4 y5 C: Q　　注：固定宽度列的高度>自适应宽度列？
4 W2 u) u$ j" Z5 T! c　　三、使用flexible box实现 真正意义上的流体布局
5 _$ a. {- ~( q( t4 E　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
2 _' p" H' W1 E0 L; Y* i

来源：博客园
; H7 Z) Z5 f9 K: {9 N0 n