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

w8484855@qq.com

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

/ \' T: E8 b& K1 U                               
登录/注册后可看大图

4 O( K9 N* |; @3 W  {2、第二行只有中间图片的最有边距是5px;布局如下：

) [7 S1 U4 i( v+ w$ E! m                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
; A# q: K) l& d　　二、使用display:inline-block
( I0 _+ J: B+ g& O" t2 F! F　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
- N, D  t5 P* Z

, r) _" X# m. d, U                               
登录/注册后可看大图

: t, H/ ^8 r8 V  [" q$ i红框中的布局就是使用display:inline-block最经典的布局。
, v5 A, _6 g$ t1 [2 }2 n

) m8 l2 |0 R3 ]5 V2 S5 _                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
; |9 D, Y) n6 d- j7 K; b　　此出还有一个经典的布局：
6 ?8 C$ N) w! |# V: ?* C

5 s, {( D7 _6 [% [" J6 h! O                               
登录/注册后可看大图

这种布局一般是：
　<div>
; j4 z7 Q- ?. ?5 A) i2 i            <img src="" alt="">
            <p>
) Y; ~: k. v: r$ G5 o& v& O% F    测试勿拍
7 |6 L) l7 _# A$ h            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
( B1 f' Y- D- k, B) O# p/ o　　1. 对div进行相对定位
% Q$ U4 Q& V/ s5 W1 F　　2. 对img进行绝对定位
4 ]# M: v0 q% F$ ^+ ?% s. D　　3. p进行相对定位
% p6 B4 k# P% A　　注：固定宽度列的高度>自适应宽度列？
5 ~: p5 A0 I7 d) T' b2 j+ c　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
& Z) d7 p/ U. X) ?1 t# T

来源：博客园