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

w8484855@qq.com

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

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
$ g+ D2 a) U8 O" H

. _. O; q2 G; ]1 q: K/ A8 z                               
登录/注册后可看大图

' K1 M& _/ P* B0 k: X/ g. m( g' x0 I注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
9 ?$ G  @1 h; ~: N! j0 Q　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
$ }" O# f0 x/ ~( _: T$ H6 G% E9 o

4 e) J; ?& Z7 e8 I( ?  r0 B9 a1 b                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
5 l0 X( |3 U+ ~3 W( Y+ ?' H: A0 @! B7 V7 q

+ a0 l& p+ h: `' c2 }# k. S                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

( N2 o9 A' k# P6 }" d9 @, o1 U这种布局一般是：
　<div>
( z  X. m% }: k! b# a            <img src="" alt="">
6 E: p6 `* Y! g% ]            <p>
    测试勿拍
! z& Z/ i; z9 R. J" T$ U4 v8 i+ @# a            </p>
</div>
8 S7 d3 C- S& E& u8 O8 y+ |$ n+ }　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
: o1 i1 k( w4 o
, ]8 X" u2 m$ A2 K
来源：博客园