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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
, w) |* @# D- a　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
/ _: H8 k6 {. x2 n8 }6 Z" q- p

                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：
4 ?* o7 f# e7 ^$ H8 g4 e4 I

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
, Z: s# u- M  N　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
( I, k6 I: f* S5 S9 Q% L

6 L" d: }: F1 k0 Y0 G: C7 {                               
登录/注册后可看大图

) }" y2 a" b0 x: x5 e+ F3 |9 [红框中的布局就是使用display:inline-block最经典的布局。
, ?5 B! W8 m* W+ h" X* ]

                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

+ R' D6 Q2 w) i4 X5 E5 \这种布局一般是：
　<div>
            <img src="" alt="">
- _# i, t- @  b8 g! X' b            <p>
    测试勿拍
            </p>
</div>
" U) u6 `0 y8 m) O% _　　使用定位position:absolute常用于左边固定，右边自适应的情况。
9 g: J* X, w  J　　1. 对div进行相对定位
4 A- O3 s9 ^6 M# Y7 H1 O　　2. 对img进行绝对定位
+ Y5 P" y, I4 f  f　　3. p进行相对定位
- C: }& G" r9 I7 l+ e5 L+ o% v　　注：固定宽度列的高度>自适应宽度列？
1 M, s+ Y$ |# J. y　　三、使用flexible box实现 真正意义上的流体布局
% _' w: d4 t9 j: Q" o　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
8 j/ L% {- K2 w( C! J7 j# C
& ^: Y; c, H- ], Y7 r
来源：博客园