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

w8484855@qq.com

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

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
  Q/ f( X+ z7 e3 W5 k4 t) ?$ t4 y

/ f2 X  y9 S5 j; n                               
登录/注册后可看大图

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

% a  @' L3 }' b7 e/ J                               
登录/注册后可看大图

9 q1 z( g6 K5 f红框中的布局就是使用display:inline-block最经典的布局。
$ M8 |- e' Z- b

# R1 ~. b$ b% L% f                               
登录/注册后可看大图

+ T3 _9 p3 a. U  J此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
  T% U! {, O7 q, |: j

                               
登录/注册后可看大图

这种布局一般是：
　<div>
: g" }( U8 D9 t8 D7 @- t            <img src="" alt="">
& m9 w0 o, ^0 J% {            <p>
, b! d% Q8 {5 N  z  o  I    测试勿拍
8 ]5 g2 N8 w4 I# [3 `            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
$ g+ @7 U  ^+ w　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
8 a- W/ [$ t& j6 p& f" \　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

( |$ S& b) s) u; e) `
来源：博客园
7 \7 x" S7 B/ X! \( d: D5 v