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

w8484855@qq.com

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

                               
登录/注册后可看大图

$ o! S$ H# B7 ]' ]5 ^2、第二行只有中间图片的最有边距是5px;布局如下：
# Q9 S  E1 y* I9 W5 X5 `

                               
登录/注册后可看大图

1 l* G6 p, M1 V- x3 x5 p2 G注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
0 ]7 A3 u$ V) _; B　　二、使用display:inline-block
( ]' [* R% \, l! u/ j* o　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

% O5 g2 {" A% J5 p1 s) q( v                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

* \, t& @) z+ G4 ~$ |1 G                               
登录/注册后可看大图

9 a: j. N+ G/ r6 q% Z$ i4 q此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
. O* @2 h3 W  X5 U# u　　此出还有一个经典的布局：
3 Q7 k" C& W  l2 @# c% Q

3 G% h; N7 V# ^2 T( S                               
登录/注册后可看大图

这种布局一般是：
& W' f( k* j9 a$ _" H+ H3 m+ ~　<div>
2 o. C+ e/ W, n% @            <img src="" alt="">
            <p>
    测试勿拍
            </p>
8 v- `: F0 [# F* {' r</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
. P/ _+ w9 e8 ^% F　　1. 对div进行相对定位
+ j6 l& L! O9 j" \, h" x  z0 q( _　　2. 对img进行绝对定位
　　3. p进行相对定位
+ z4 v+ P1 o0 k, J7 i. g0 b, E0 U! c/ ^* i　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

! t6 O1 x# T2 [. J
; J6 g0 k- O5 Z" b' p' f来源：博客园
. A" q! y. U* b5 b9 g