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

w8484855@qq.com

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

2 K/ l+ y2 I" {5 {7 d& y! E                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
7 O" o' ]9 g  b7 _3 h

; y4 e& X0 p7 t/ w7 n2 k# R                               
登录/注册后可看大图

0 I* T+ }5 ?( }, r8 I- p. k注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
+ Y# M# D$ n  h' t4 Z% c7 }9 j* b　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
2 k# N2 k* Z" {+ q& F

                               
登录/注册后可看大图

7 @8 ~* k& \* a- F红框中的布局就是使用display:inline-block最经典的布局。
! R; G4 Z  K, X7 P( E$ A" G. c

                               
登录/注册后可看大图

+ W5 Q/ I  n7 Q此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
  f. G. {6 A8 Z# d4 Q: E　　此出还有一个经典的布局：

                               
登录/注册后可看大图

8 E9 S# Q8 y! m+ T& l) E" D3 r3 n这种布局一般是：
　<div>
5 R/ c! H3 y: v- F, R" b7 a            <img src="" alt="">
            <p>
    测试勿拍
            </p>
9 D( i) G7 i# i9 J) p</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
' `" l$ j. u0 \　　2. 对img进行绝对定位
/ T8 G  d  D5 l* W+ Y　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
# F! U" A+ H& h
" C; a/ S# t5 u3 C
来源：博客园