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

w8484855@qq.com

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

( P" ?# O, w4 R7 @- @$ h                               
登录/注册后可看大图

( o3 u( \9 h7 H+ O8 w2 A; \2、第二行只有中间图片的最有边距是5px;布局如下：
" ?" t8 m4 T$ D

                               
登录/注册后可看大图

2 a1 d% u, K  A3 q5 x  y( ?: R注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
" Y, _4 _/ `% k& N1 V# ^　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

2 {) L3 w/ A5 `8 }/ c+ m                               
登录/注册后可看大图

% [0 Z* a& {( @# Z; [红框中的布局就是使用display:inline-block最经典的布局。
( K* ^3 E0 e. }) j2 Z

                               
登录/注册后可看大图

9 y# W* c# a' y( _  e% i此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
5 f3 X" d6 R' o8 a; W

                               
登录/注册后可看大图

这种布局一般是：
5 E" |+ j7 f. |4 Y; y　<div>
            <img src="" alt="">
! k( \6 N) B* m0 [3 s            <p>
    测试勿拍
, ?/ d' ]0 _3 \5 Q! D4 @/ w- B# A            </p>
+ B0 v5 Q5 p$ U/ W6 a" ?</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
% g# X& h# ?6 j' L　　1. 对div进行相对定位
　　2. 对img进行绝对定位
2 [  o# E  S/ V) V1 P& k　　3. p进行相对定位
* |% S8 J' g( y+ e+ o　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园
) k- i+ R7 Q  W5 M9 B