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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
% \' T  o% k" f3 p9 y

+ ], v' f" o0 o/ D8 t4 c                               
登录/注册后可看大图

+ y2 r4 f$ a8 `2、第二行只有中间图片的最有边距是5px;布局如下：
0 h+ y' p! j. a0 Z; j& N! j! B

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
: V, A: n9 h4 a  P4 H" |# Z+ U　　二、使用display:inline-block
5 Q1 ]4 p6 ?: i" e5 x+ X　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

( }9 {: N. }$ T, w' ^+ n3 e* U                               
登录/注册后可看大图

, ]( O. N( r+ g红框中的布局就是使用display:inline-block最经典的布局。
  B" o$ G# R9 z# K$ V- `

' c; A1 f( d) ]2 E( V" |$ [0 n& p" V                               
登录/注册后可看大图

$ N5 D4 D9 k8 g4 s, v  u此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
- Z% |4 B2 Q7 O7 A' D7 Q

+ Z( F2 n) M& v% U) W                               
登录/注册后可看大图

% E& a4 d5 G  l7 h这种布局一般是：
0 `) O' q/ i6 q% N; T6 L　<div>
0 v. @7 E. J# E0 A2 E* G( W. _; e1 e            <img src="" alt="">
% n) a7 S8 c6 G/ V3 k) q            <p>
) f4 Q; J2 }4 o/ j    测试勿拍
0 a  `" I3 I( M: Z0 z            </p>
0 @+ S9 p1 m( H2 o</div>
4 F7 W9 F2 n/ O& `9 J/ D　　使用定位position:absolute常用于左边固定，右边自适应的情况。
- Q$ _4 S2 i% e# @' Q8 b　　1. 对div进行相对定位
　　2. 对img进行绝对定位
5 d+ Y, [( K0 E8 W9 ]　　3. p进行相对定位
5 O- Q  K, ]8 l% R; Q　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
1 f+ b5 L$ C9 G9 T& J

/ p; g# m0 C$ u9 g; B& @1 i9 C5 c- E来源：博客园