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

w8484855@qq.com

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

: Z) S( F# C; }  O, w9 n, Y; i0 u2 N                               
登录/注册后可看大图

* C; T; T( u6 A- B! g2、第二行只有中间图片的最有边距是5px;布局如下：

8 U+ H- \( Y8 P0 d6 F  a& i                               
登录/注册后可看大图

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

$ V$ U1 ^" F, P                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
. a3 l& [1 @% p6 f( }7 s6 j9 d

; k& C" j2 `! b' ]+ X) y                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
! V- u# d/ |! w; O9 O% O! [5 E

. X% D" c+ k6 k                               
登录/注册后可看大图

4 S  ]7 w0 t+ B4 n4 P2 j这种布局一般是：
3 s5 ~7 {4 E. E' C( V　<div>
" g" J! T; Z( B& C% l            <img src="" alt="">
            <p>
    测试勿拍
/ m7 ?9 A8 N% O" z            </p>
</div>
8 L# q0 G1 {5 }  Q7 }2 L' g. F　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
, j. P3 R# f1 W/ u. C　　2. 对img进行绝对定位
5 ]% t! O5 n$ x0 W  o& Z: _4 g7 W1 Y2 @　　3. p进行相对定位
; }1 C. N# [- d6 i  J- ^0 x8 l$ G( v　　注：固定宽度列的高度>自适应宽度列？
, j$ D6 P5 P( e0 [/ K: R' W1 M8 k　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
, [+ |+ t# g* a+ c. [- h

来源：博客园
. C- F7 i( `+ A7 _6 \6 m' Z, D