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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
7 D! j# a1 I5 r0 {4 w" C0 N　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
: S7 ?) a( J1 O7 ]

0 f( _9 y9 a% J# P; _/ v                               
登录/注册后可看大图

7 d3 ]4 [! K" K1 P2、第二行只有中间图片的最有边距是5px;布局如下：
+ H2 V  x( x1 R0 H+ J

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
0 r! M" ]1 y2 X4 G* u2 o　　二、使用display:inline-block
/ Z$ K7 q4 F; G: E2 E9 \　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
6 u2 V' @( I6 N* [0 }* ~

" b5 v0 {1 P& m9 y* \                               
登录/注册后可看大图

: E$ f* r7 E0 u) }9 ^* k: L* t. O此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
) V- Z6 N0 x2 x7 J1 B  H  L　　此出还有一个经典的布局：
$ q. v6 ^8 h: Y' x0 a' u! Y+ c

                               
登录/注册后可看大图

这种布局一般是：
, \4 e" x6 @9 T& K& M　<div>
            <img src="" alt="">
  X: t; b% Z0 M, W            <p>
2 M! v; G# X$ Z, W+ C- @    测试勿拍
            </p>
& ~8 a/ ]3 B8 J! O1 M! j</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
( ~8 H# T- {' Y4 K% p6 ?; B6 }( C# L　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
5 y. P% }: M) p% @& i, q) \