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

w8484855@qq.com

本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
- w6 S+ e  v/ v- n5 K% t! s; W0 ?　　1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：
+ o1 Q) ^, @% X

                               
登录/注册后可看大图

+ Q. H( G! q0 r& |+ D2、第二行只有中间图片的最有边距是5px;布局如下：

                               
登录/注册后可看大图

! ^3 `# v9 Q$ E9 S注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
9 o4 A7 S! ~7 ?4 T2 O& J　　二、使用display:inline-block
% T2 `8 e# {; F$ z　　display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float

) c0 V- r7 ^" P. s" M4 v: W1 J9 P                               
登录/注册后可看大图

红框中的布局就是使用display:inline-block最经典的布局。

# h; j8 I4 }  |# F                               
登录/注册后可看大图

此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。
5 T9 e: p( L" k  }2 T8 p　　此出还有一个经典的布局：

                               
登录/注册后可看大图

0 s( Y% @3 t" P; X$ `3 h7 z$ y这种布局一般是：
9 f! P% ]: y, _5 s) Z' r" W7 S　<div>
            <img src="" alt="">
7 Y. f: _( p6 F2 X            <p>
5 _3 k. k3 J5 m+ C# E4 ]    测试勿拍
            </p>
</div>
　　使用定位position:absolute常用于左边固定，右边自适应的情况。
7 H& }8 o. Y4 E! D, \　　1. 对div进行相对定位
+ D. u, y- S& h7 }4 [; K　　2. 对img进行绝对定位
　　3. p进行相对定位
; m! N8 D5 T; C. E8 h　　注：固定宽度列的高度>自适应宽度列？
　　三、使用flexible box实现 真正意义上的流体布局
; e2 @4 h0 I7 X) G: [5 e2 U8 P　　这种方法本人还没有真正在实际操作中体验过，此处先记录下来~

5 s' e4 L/ D" K7 W5 f, N5 w
来源：博客园