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

w8484855@qq.com

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

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：

: x# g" k5 c1 k8 f                               
登录/注册后可看大图

& b- [1 n8 m- v% {注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
& _7 ^/ o+ _9 x9 x2 Q　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
6 b( d7 v! @1 U' s

                               
登录/注册后可看大图

0 ^3 e& Z0 H2 p8 c8 b+ u红框中的布局就是使用display:inline-block最经典的布局。
" U4 z3 r& i- I+ L6 |) @: q9 l2 G' l

                               
登录/注册后可看大图

+ S' E2 W- l* a( ?5 K此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
) F0 L- v' f7 i  l3 u　　此出还有一个经典的布局：

! e9 y! z5 w$ O5 ]9 f                               
登录/注册后可看大图

% U) Q- l( Q3 w, X; M- X' s这种布局一般是：
　<div>
- p& w  F! \/ E# k3 i            <img src="" alt="">
% i5 C1 p4 G1 T$ J7 c            <p>
. k  E" O5 o3 Y+ f. J% ~    测试勿拍
" X4 X- @8 L5 i& y            </p>
' n6 _4 O, r& N$ a</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
% [( q1 ]/ C- G　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
# J' ~+ ]( W; i% z3 ?2 D　　三、使用flexible box实现 真正意义上的流体布局
  N; g6 _: {& p  k　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


' z/ w8 F4 I$ S9 l来源：博客园