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

w8484855@qq.com

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

0 |) U, E8 ~' Z/ d                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
- V* Y# x; u( n  h3 Y

                               
登录/注册后可看大图

) t$ d9 W4 X4 R& v1 p注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
+ A, @* _6 _( N4 F; J　　二、使用display:inline-block
- W) `* a! C' A# d　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
8 }; ~( I6 ]/ R- J& C

4 S" g2 }/ i9 }5 P) H                               
登录/注册后可看大图

" y$ @. M0 H: T8 o" k( Q% |此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
6 c! V: M) ^( A8 e　　此出还有一个经典的布局：
7 V$ J4 }0 M: I/ [: z# R- B) v( \

                               
登录/注册后可看大图

5 A9 f: q7 `" {2 _这种布局一般是：
　<div>
            <img src="" alt="">
            <p>
' Z9 E" @( j7 l+ S' L& B$ @5 ?    测试勿拍
' g6 }2 @9 f, v# g            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
  k0 F9 C4 f5 r" K  V% o　　2. 对img进行绝对定位
9 M% U% j' I, u+ q3 ]　　3. p进行相对定位
6 U8 C9 T, i6 q8 Z　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
& T+ ]/ Q4 ?7 T

6 z' T  W. B0 l; u1 n$ d来源：博客园
' D9 ]' f& \5 |( T- |( o2 \