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

w8484855@qq.com

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

                               
登录/注册后可看大图

7 }) N( \; q7 K7 @6 h9 t; g2、第二行只有中间图片的最有边距是5px;布局如下：

4 t/ n( a, c: R+ K# x                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
/ ~$ i4 N( Z2 |　　二、使用display:inline-block
! j- [5 M+ m. u# c( T) L$ I+ S2 ~' G6 c　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
: F) c; j9 H% y7 v; k5 t; b

                               
登录/注册后可看大图

, Q" N1 Y( U- D- H3 A红框中的布局就是使用display:inline-block最经典的布局。
. O5 e9 y6 m( ]: u% V* [1 m

                               
登录/注册后可看大图

% Z4 n8 N/ R: g4 N9 s8 L9 A' i此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：

                               
登录/注册后可看大图

" w6 Q' ?5 N3 H9 {2 h0 ^' e2 q) D这种布局一般是：
% s- c5 ?; P" U　<div>
            <img src="" alt="">
7 J3 S4 C# p( p7 i6 p            <p>
    测试勿拍
7 `; n  R3 h  h            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
& t4 g3 O8 ^! a0 S2 t7 r6 x　　1. 对div进行相对定位
- @: L" H& {" e- R) J8 ]. ~　　2. 对img进行绝对定位
　　3. p进行相对定位
, D: J5 u! s# R. c5 }! @( t　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
& R% S! \, K9 Y! t　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
6 c; Z9 ]2 p3 G

; M5 P: c3 V6 f来源：博客园
4 g/ B6 ^5 h: O, y# D  R, X+ W5 {