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

w8484855@qq.com

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

- n8 S/ a" l* o/ I  Y0 v8 v- v                               
登录/注册后可看大图

; \& c; ?3 E& z1 f6 a& E9 X2、第二行只有中间图片的最有边距是5px;布局如下：

2 \1 w1 L9 y( ^/ u                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
5 S5 v8 N9 \  d$ _: N, c* t　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
( `4 M2 g: f8 ]% @3 J. k) S+ }

# v* z3 @! E% N; E- Z                               
登录/注册后可看大图

# X* l4 S# F9 P( X/ L8 W+ j  F1 a红框中的布局就是使用display:inline-block最经典的布局。

4 u; w: v1 [( a1 T2 P                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
( K, w3 p, l5 ~# E6 v　　此出还有一个经典的布局：

% b8 o; f$ M" Y  Q                               
登录/注册后可看大图

% e0 ~$ m) A  E4 H! m5 H' O这种布局一般是：
( m# [* }7 ~) Z# V! |- p6 T　<div>
            <img src="" alt="">
            <p>
    测试勿拍
8 Y2 j5 q3 R! U( F9 L: ?            </p>
! E" L* s& n& F</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
' D$ }) S" m" m/ n3 A' e9 e4 ]　　2. 对img进行绝对定位
　　3. p进行相对定位
# v- a7 }7 X2 [( {2 q5 q$ E; s- h　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

! F! N$ m- |$ z, l
来源：博客园