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

w8484855@qq.com

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

4 |5 d/ K8 J: h- ^9 m; ^                               
登录/注册后可看大图

  _$ m# s  [" w3 b2、第二行只有中间图片的最有边距是5px;布局如下：
( p& K! J/ g! {4 m# D) Y' u

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
9 \( Y; V4 B. ~* y# D- H8 }$ j. d　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

9 d0 V- T, g0 x. ^  a6 K红框中的布局就是使用display:inline-block最经典的布局。
( x$ ^5 [9 i( m) U

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
2 V+ L: T0 c9 ]8 ~$ I　　此出还有一个经典的布局：

' c6 B( N) ~: ^, x  j1 i                               
登录/注册后可看大图

+ r/ X( Q. O3 g- a! \这种布局一般是：
; A* ~1 `( O1 Q& H7 n　<div>
5 Q* x$ ]$ ^5 G            <img src="" alt="">
  d% T4 m8 N, r4 B9 }- R; N            <p>
3 n# f  t% ^5 R- v7 f" ?/ t    测试勿拍
6 C- v* g# X" d            </p>
</div>
; D: ~5 n7 u1 F3 J, E; s8 ^　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
! i+ `% f! P3 @; ]- K' Q4 a　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
4 [3 ~$ ^9 s5 @! y　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
; d% [# q* k6 m2 m6 U
7 q, W7 s9 ?  m3 O! z# q% s+ T0 i
/ |* w, G. {6 B$ U& d来源：博客园