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

w8484855@qq.com

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

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
& H8 l! T5 T4 I  L9 h

9 t# b( v% N' p# k+ d* K% b                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
+ C  `: j( d& C( j! ^　　二、使用display:inline-block
　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
8 h2 X: Z# W8 G

                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
! v) T$ Q5 [( b" ^: |　　此出还有一个经典的布局：
( Z. i. e8 k$ x5 X& U3 Q% b! u

& Q+ e7 G$ {: x$ G                               
登录/注册后可看大图

这种布局一般是：
　<div>
            <img src="" alt="">
6 |' b( }- A! v- s, W# S% h5 k            <p>
, ?. R, }9 Z3 m7 z) Z    测试勿拍
) I. l. s' g  O6 d            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
' t0 w0 @9 B1 C! W! D. z5 c4 \　　1. 对div进行相对定位
　　2. 对img进行绝对定位
" `  Q" O7 o) ?4 x" `- c& D　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
0 N& o4 ^+ v" o& s　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
4 j$ k. ^. O$ I9 u  o7 l( n/ L

来源：博客园