|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
8 G( `% f' M8 _1 B7 b4 C 1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：- O2 y6 e* N0 N- q' C' P
+ u' P) d- k. a$ h2、第二行只有中间图片的最有边距是5px;布局如下：
: K% q. R4 z8 m2 w4 W) N
6 ^5 t6 i7 ]$ N, a1 R6 A$ h注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局
7 }4 V3 N8 [; d7 ?0 I 二、使用display:inline-block
7 V2 C6 ?: f4 \, f% Z display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float2 U; N- K. |; ]4 }, S/ A/ W L7 u
) p9 G6 V& q; |, E& i, N
红框中的布局就是使用display:inline-block最经典的布局。
! f6 d: {( C1 [% @6 s& M
4 R6 @* j7 b7 l此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。# U8 Q& I) R/ @* j- ~
此出还有一个经典的布局：
2 p7 u* O: @. `
9 A. M4 _% t, `这种布局一般是：) w5 F: f' k5 ~7 y
<div>
2 _, d: h, L/ j, G6 \# a <img src="" alt="">
( v* k, e' t7 m0 M <p>- l( J; Y$ K/ X- h+ {
测试勿拍
. H$ \# r7 u# { </p>
2 U$ h y& K5 j% R! O</div>% I, l9 a( y0 e7 J2 c. J
使用定位position:absolute常用于左边固定，右边自适应的情况。( s- q' e& y8 `6 E% }: U& s
1. 对div进行相对定位
: H) M/ o& j' S5 z _3 T, y 2. 对img进行绝对定位 a/ S; G9 F( m- V* o( U
3. p进行相对定位
- V6 ?/ s3 h" z" `4 k( L! r& ~8 s 注：固定宽度列的高度>自适应宽度列？
, T) N& _3 \# Y. N8 {7 K: N: G( D+ d) m 三、使用flexible box实现 真正意义上的流体布局) r2 O+ D: h2 L% j
这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
, ^3 D: ]! O8 V/ k4 M% z
( n+ W0 [$ R, Z5 X! T( d. l) l3 M) E' v( e) L9 @
来源：博客园$ D, R/ P: ^$ p6 B7 m' x: g
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-8-8 14:39:53
( Z- Y' b) H/ K. Y7 |
& I/ _7 v8 k1 S) a5 s$ k
置顶卡
千斤顶
显身卡