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

w8484855@qq.com

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

$ x8 l4 K5 G" G1 ~$ Q4 t2 ~  z5 W                               
登录/注册后可看大图

2、第二行只有中间图片的最有边距是5px;布局如下：

( p4 D7 c5 C3 m) ^7 G( H                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
9 {/ v, W4 k5 t- Q/ e" z　　二、使用display:inline-block
- g. I1 @% N# d1 C' p7 _　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
! {* A2 M7 l& m( `) o# \

* y0 q$ K6 ?/ l8 e, d                               
登录/注册后可看大图

$ l/ }) X9 m$ F+ X7 A5 l+ ?红框中的布局就是使用display:inline-block最经典的布局。
8 C( \. ?- h: ~. e

                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
5 S, s' L( F& ~& Q　　此出还有一个经典的布局：
8 c; o7 e  I" q% q6 L

                               
登录/注册后可看大图

& l2 B' L# W$ h0 m5 g- d这种布局一般是：
0 P0 \# R$ j; \2 r8 B　<div>
) q* _$ u: U2 Q1 _) J" R" j            <img src="" alt="">
9 J3 a9 |( C/ v* v            <p>
% \# [7 `- w/ y( e8 z1 w    测试勿拍
8 D$ y" U9 n# R+ P! T' X            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
, j; q9 P2 r  u8 V　　1. 对div进行相对定位
　　2. 对img进行绝对定位
; v6 j" [1 f* t3 D4 t; o/ F　　3. p进行相对定位
- W+ {5 S$ b* G& P$ H8 d9 B8 c; |　　注：固定宽度列的高度>自适应宽度列？
7 S5 `, g- O) j, J4 m! |$ O　　三、使用flexible box实现 真正意义上的流体布局
) A: j! A; h, ~$ Z  C) g　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

' t! z/ K) ~1 f  F( V' r  I
- X' B( H7 _+ d来源：博客园
2 Z8 }- \4 w+ T- ~