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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
2 }* s" K9 o: j% ^- o　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
8 l% |( E) T! d; g

$ T; N' G& @9 I6 r0 z                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
# h; N, a+ M( G' O1 O  c* ?4 E* ~

                               
登录/注册后可看大图

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

2 `+ D1 @0 X% Q& N7 q  v( ~                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
- p: ?% M2 m9 r5 I1 C. e4 A  U

  a& D& q: e: Q                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
3 ?7 j+ m2 i8 S

                               
登录/注册后可看大图

这种布局一般是：
, {2 \% A" f: N+ m　<div>
            <img src="" alt="">
            <p>
    测试勿拍
6 a. u  _2 T9 m2 [            </p>
</div>
7 H$ j) |) l! s  L" q) h　　使用定位position:absolute常用于左边固定，右边自适应的情况。
# R, I/ T% R/ z* A& w, x　　1. 对div进行相对定位
& s6 u! Q/ J/ ?/ y- |$ F　　2. 对img进行绝对定位
( a  w; ^' f' c0 z　　3. p进行相对定位
9 X5 h3 E# H& N: q& g5 y　　注：固定宽度列的高度>自适应宽度列？
& d5 e0 _. \3 O! A　　三、使用flexible box实现 真正意义上的流体布局
1 H  t$ a+ M. C% B0 }& ~! e　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
- A& Q% X* U% W& R/ d* y

来源：博客园