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

w8484855@qq.com

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

! b0 t: y, R1 \& p3 I" T                               
登录/注册后可看大图

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

                               
登录/注册后可看大图

注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
3 \9 u( ]( d9 y. ?　　二、使用display:inline-block
. y1 {1 }7 l& d( j: }　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
" w; ~9 N3 M; W8 v5 G

                               
登录/注册后可看大图

: T5 r- W& w! }8 R! y红框中的布局就是使用display:inline-block最经典的布局。

5 G. ?- Y3 s0 [                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
　　此出还有一个经典的布局：
; ?! m% i: [: w* I2 L7 u

3 ^0 R, v+ V* [% K                               
登录/注册后可看大图

* G$ I5 G, s6 ^$ @$ d这种布局一般是：
; ?: i5 y  J* L0 x0 k5 h5 t　<div>
  t" [- J) d1 M; E- [) A# c7 }            <img src="" alt="">
/ Y6 t6 @( s( L6 o            <p>
, W% a% p# v1 s6 o* M4 b. n  u    测试勿拍
1 ~2 L) |$ x( y. N) x            </p>
</div>
- N0 o" {, O. n9 o5 t　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
　　2. 对img进行绝对定位
　　3. p进行相对定位
' ^5 a9 B7 c* R4 c　　注：固定宽度列的高度>自适应宽度列？
6 P, R2 }8 `- Z" Y* w- @　　三、使用flexible box实现 真正意义上的流体布局
　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

$ B2 }  S7 I$ s% M- u
来源：博客园