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

w8484855@qq.com

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

1 `9 H: j; Y+ }7 H8 Y                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
& p! F' M. }+ W* g6 q9 v/ J

                               
登录/注册后可看大图

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

' N; k8 o! D/ M* S                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
3 r& z: y& V  [5 p; Z+ F5 W, g' q

                               
登录/注册后可看大图

这种布局一般是：
　<div>
            <img src="" alt="">
8 `% g- d+ Y* _+ }: \            <p>
; f6 }) R- c% G    测试勿拍
, o$ L8 O7 D! i) P            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
( k5 {: E- N0 z3 Z6 i3 P! O; ~　　1. 对div进行相对定位
6 M$ U$ i4 z  m　　2. 对img进行绝对定位
　　3. p进行相对定位
- q$ ^' w& `; W4 W6 Z- C. R4 }# M　　注：固定宽度列的高度>自适应宽度列？
1 R6 H# B" p- ~　　三、使用flexible box实现 真正意义上的流体布局
' q: M8 j. n) n+ R! [　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

# o' K; j* ?6 t& v' I! w1 U# A
/ I+ ]/ ^# l& ]来源：博客园
; C  I3 g- q) }