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

w8484855@qq.com

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

                               
登录/注册后可看大图

4 V4 R' n+ u  p8 d' ^' o2、第二行只有中间图片的最有边距是5px;布局如下：
* L6 w# [/ j6 q

3 ?3 s* T2 n- X, R" ^; a                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
( ~9 y$ p8 j% K5 h" w0 [% K

                               
登录/注册后可看大图

1 E. C6 v! X3 Y4 D6 ]红框中的布局就是使用display:inline-block最经典的布局。
7 O$ B' l6 z' s7 O

' a3 P; m! v& [                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
: {6 U! p3 U9 x/ I6 k/ N; a

3 _2 o$ m7 E. u0 J; R3 U                               
登录/注册后可看大图

2 w: K5 w8 p7 N8 F$ Z3 @这种布局一般是：
　<div>
: L6 y2 k  R2 G# Q4 [            <img src="" alt="">
            <p>
' M# R; q3 B3 J; Z: y: r3 Y    测试勿拍
# l8 T2 u& c# A% u7 d' H% K" l            </p>
& y' l6 N# ?0 I</div>
: b4 @6 j% n* y! E　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
. I3 q( o  C, c2 y: z　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
9 X! [3 i( L3 `　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
3 ~! _3 z! J9 w' Z0 n% ~