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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
0 B' N/ D, A. {) q3 g# Z$ L

& s+ s4 X8 `7 J* ]                               
登录/注册后可看大图

7 ^6 w. x0 R) g0 D8 G2、第二行只有中间图片的最有边距是5px;布局如下：
* F5 N- \1 A8 @9 F0 M; K5 j& I9 e

1 D0 _* [$ f5 k' f) m( |5 `                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
% Q: ^/ Q( _* z7 h; T* q　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

' ]# }1 N; O- _8 i* x( W0 {; O6 W                               
登录/注册后可看大图

% b/ c' Q# ~# K9 X- H4 t红框中的布局就是使用display:inline-block最经典的布局。
0 f6 ^; F: |+ f8 ^, n

1 e2 {! G4 P- N                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
( F9 P& M/ I0 f& v+ Q

                               
登录/注册后可看大图

$ A# v3 f. n/ G4 i, [7 C7 P8 v这种布局一般是：
　<div>
            <img src="" alt="">
            <p>
1 t2 |% p- N& V  W; k" I    测试勿拍
( C7 g9 b/ a2 S6 d# @: O            </p>
, ?1 O9 ~- N7 U7 v</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
2 ~, _% |/ y8 O% O　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
, s+ X, a+ p4 R　　三、使用flexible box实现 真正意义上的流体布局
, `+ f2 \7 Z; z　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

4 r- A' V/ t2 U+ ~
来源：博客园