|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本文和大家分享的主要是css中横列布局相关内容，一起来看看吧，希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。5 U ^ d9 @# b9 W
1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下：; U- E! u6 Q J9 O7 z/ Y, k
2 C% @ _; X* p8 q# N+ k2、第二行只有中间图片的最有边距是5px;布局如下：
, z7 }& K- s- i* K; q - j, A5 p5 C; Q9 Y9 s( p, \7 p
注意：使用box-sizing: border-box后如果没有其他样式，所有的块将全部贴在一起，中间是没有任何间距的。这也是一个很经典的布局9 \" k$ h; m* q% O) L# }
二、使用display:inline-block
) J; ]3 A7 _8 h" T( n$ z+ V# ^/ v display:inline-block大多数用于行块的转换，不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
, m# y- f9 l( W
7 q& Y' S/ b- f V' l红框中的布局就是使用display:inline-block最经典的布局。$ M6 \" |: }9 p" [9 b0 F
u& @$ J: h- M; A" W/ e2 E此处使用了伪类，关于伪类的定义是使用后面会有专门的笔记来记录，这里就不赘述了。1 E' |4 L* C/ G. D$ `
此出还有一个经典的布局：- ^$ K; z& b; A! q& ~ e {9 g9 U
4 i. V0 f1 i" [/ N* z" f0 u" v* O这种布局一般是：1 x! `. D$ T! O8 R8 s2 X
<div>
- @2 B( e0 o4 \9 I9 H <img src="" alt="">
$ [: e/ F% v( @3 @/ f, n( _ <p>- a7 A+ j8 ?, n/ t# B, S$ x
测试勿拍7 s2 P, b g# X7 }) ^( O
</p> 0 H* P7 q! q9 J8 ?% j+ K6 ?3 [
</div>- s; |6 F# E* T: v3 O- m3 f2 [
使用定位position:absolute常用于左边固定，右边自适应的情况。
6 E) s8 m& e; p: k9 D 1. 对div进行相对定位" }) J n( i* Q# w; `- i4 x
2. 对img进行绝对定位
; v# `7 I! a+ P. y3 t1 M+ w 3. p进行相对定位' C4 k/ |' _# E+ x
注：固定宽度列的高度>自适应宽度列？
& D/ @8 q9 F4 Z) f 三、使用flexible box实现 真正意义上的流体布局
% ]' P2 a7 p3 e, F2 R 这种方法本人还没有真正在实际操作中体验过，此处先记录下来~
% y; Y: j" Q6 ?, ]) @
$ C8 j0 Z. B3 ]* a; m1 a" z
" z4 N, \' q4 [' D/ R3 ~来源：博客园9 q6 b' k; |, w6 G) n
|
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2017-8-8 14:39:53
, @" }/ y$ R1 `- x" Z) [8 |. N
" W3 z/ }1 ?5 Y! C
4 |" S- b4 @, W+ L5 h& P
2 \4 e1 O- z2 ^" d2 I
置顶卡
千斤顶
显身卡