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

w8484855@qq.com

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

) r- K' T) y6 z" M" N                               
登录/注册后可看大图

6 C, S5 M$ R. p5 `0 W1 `6 t2、第二行只有中间图片的最有边距是5px;布局如下：

  a4 \5 \: |) i                               
登录/注册后可看大图

2 D% q0 ]" P9 y( l3 ^6 |+ U2 l, U# k注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
- ?2 \+ B1 r. E3 n, j' j　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
, X8 w* j( u3 P9 i, ^! [1 U

! u6 X1 S6 j7 c. |                               
登录/注册后可看大图

, i) h7 \) B. J4 W' a8 z红框中的布局就是使用display:inline-block最经典的布局。

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

- g: g( `: |8 J4 e) n5 y这种布局一般是：
　<div>
" l  w2 l6 _+ h) g            <img src="" alt="">
/ J$ q$ o7 q7 K" e            <p>
    测试勿拍
6 S; K7 p# _/ f! T            </p>
</div>
. W% `* O5 \) w' |3 y　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
( |& |) E( f4 s8 L7 o　　3. p进行相对定位
. o4 S$ X% v! W' N　　注：固定宽度列的高度>自适应宽度列？
2 T4 y0 [2 s5 }5 X　　三、使用flexible box实现 真正意义上的流体布局
4 v6 T: ?' U5 b* h% D( v　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

0 T% ~0 K2 ]# L# v
0 w. W* _4 [- L, i+ z" }) S+ m来源：博客园