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

w8484855@qq.com

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

) `- w3 S. A+ J                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
$ n. Y% z9 F2 b$ u/ Y

                               
登录/注册后可看大图

1 K$ y( W! K% P2 N# m& X- i; y$ N0 _注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
# G1 n! I1 p# t: T　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
) J1 E6 x0 o% e: {& |

7 Z3 D; y/ ~8 o, {                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。
6 L+ G1 ]# I' s3 V4 Q

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
3 O5 r3 A$ b# X  S2 n　　此出还有一个经典的布局：

8 e$ [/ m- I. p2 W  E* }; K  K                               
登录/注册后可看大图

3 p5 t. m$ u. x) ^这种布局一般是：
/ x- A/ o: ]. p& Y　<div>
            <img src="" alt="">
            <p>
" i9 `& D& ?2 k# u    测试勿拍
( K8 d! O9 J# ~1 g            </p>
4 Z" m0 M: W# G5 B</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
& f- c$ p& k2 a0 q. M) {+ g

来源：博客园
! O9 R* v+ t2 R