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

w8484855@qq.com

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

+ d- I% u( n( s. }) P+ p                               
登录/注册后可看大图

8 g3 k; \" f5 g7 M2、第二行只有中间图片的最有边距是5px;布局如下：
: A1 L, M  M3 s2 m* G4 ]( {

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
& H* r. _* }- k& o7 L　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
) U7 [8 N0 b/ m* o# k( k

                               
登录/注册后可看大图

/ @, E. O, Z$ O5 n+ z5 h红框中的布局就是使用display:inline-block最经典的布局。

% t$ G/ J/ k! F9 y                               
登录/注册后可看大图

( q# u1 ?6 r. o+ k/ E此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：

                               
登录/注册后可看大图

$ `/ s9 T3 n: I2 w$ {- E7 a( F这种布局一般是：
( p5 N* B6 z4 a8 \3 a　<div>
6 V+ m) z( w4 o/ F4 b2 B            <img src="" alt="">
) i+ s4 m+ I7 x4 b3 O3 z            <p>
    测试勿拍
$ Y0 f6 o  T, u8 v9 h" C            </p>
- A' N6 u* k5 T</div>
/ Z+ @  N6 @- B+ J/ f　　使用定位position:absolute常用于左边固定，右边自适应的情况。
6 k! L, ]- m& R& C+ l. X　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
# |& }( r6 K' v# u4 u( @, N/ x　　注：固定宽度列的高度>自适应宽度列？
" x+ Y, M8 A/ i  J5 ~) F5 j: J9 \　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
( p0 ~/ h" K) R( v8 O% l
, c9 h/ F) `: i( w2 E2 j" u- i7 |
. E4 ?/ h! [! O' Y来源：博客园