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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
6 p* W7 x! p% B1 H# A/ h& H$ h　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
5 o) n9 \& j" o6 j1 S+ o# _

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
0 u' M5 x1 y* o; U3 \1 F' \9 o

" Z3 x1 u4 z/ U+ L# H+ ~" c5 B                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
( l" c) U3 p5 H' {　　二、使用display:inline-block
+ k  A' L% h, A  W4 V　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

$ ~, I! V7 |9 f1 y3 k红框中的布局就是使用display:inline-block最经典的布局。
, h" f4 a/ d& X: ?+ B; d/ i  p

( T! l6 q& M% z                               
登录/注册后可看大图

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

* }  b; V5 D. z$ L                               
登录/注册后可看大图

$ b! K. `; J" g2 w. f这种布局一般是：
  r- P- \+ Y' [, _6 S% ]3 I　<div>
+ s! E8 i1 _% I. v' ^            <img src="" alt="">
            <p>
7 E. l7 a) P- C# ~1 p. {    测试勿拍
            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
0 n; c) c  a+ W. x　　1. 对div进行相对定位
9 v$ ~) N2 R/ y( ~: U- D　　2. 对img进行绝对定位
& u- A! t# x' [& S　　3. p进行相对定位
6 ~7 ?; _- y# F7 C　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
+ N& Z8 J0 j# R# t7 f9 C! e& C　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
0 W6 W2 x: c  B2 t: R