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

w8484855@qq.com

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

. E' b! h; v' P' @9 Q& ^; }7 v) a& y- L                               
登录/注册后可看大图

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

4 V% S8 V; _3 Q                               
登录/注册后可看大图

' |& M6 R* ?8 O3 q. K: {- Q注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
　　二、使用display:inline-block
6 i7 \! z' \& _) X. l* [4 E6 |! e* T　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
$ Q- B8 b' }5 F

, S/ U& X# m1 `' j8 ~0 I                               
登录/注册后可看大图

; z9 J0 C$ V; V- Y红框中的布局就是使用display:inline-block最经典的布局。
7 Q% q6 W' I- Z7 R

: m9 M* f2 B7 ?' C/ @' l                               
登录/注册后可看大图

' ?1 X1 B) I$ `7 B5 v# n" o( o此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
* G- b+ O1 k* i/ X, A, w+ B1 O0 T* N　　此出还有一个经典的布局：
/ f! q0 d: G8 v" F" g/ |4 ]

# n1 ]) V6 M6 ?! i0 _1 H2 L                               
登录/注册后可看大图

这种布局一般是：
　<div>
4 K0 S  g* D3 k( ?: D3 r! [            <img src="" alt="">
            <p>
    测试勿拍
            </p>
+ [0 i$ J* T' K</div>
+ }- t+ l& \: x) N　　使用定位position:absolute常用于左边固定，右边自适应的情况。
　　1. 对div进行相对定位
1 i0 Q1 z# o1 }: ]8 |! y6 A　　2. 对img进行绝对定位
　　3. p进行相对定位
　　注：固定宽度列的高度>自适应宽度列？
' v6 f( D7 g2 t1 F$ @% F4 X　　三、使用flexible box实现 真正意义上的流体布局
/ }1 @2 Q4 u$ Q　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~


来源：博客园