鱼C论坛

 找回密码
 立即注册
查看: 1916|回复: 0

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

[复制链接]
发表于 2017-8-8 14:39:53 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本文和大家分享的主要是css中横列布局相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。/ j; B  t# D: X  B8 r' V7 S
  1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下:5 l) Y" Y) \1 `- ?, K. M& W

. l! S" N& n4 l4 g                               
登录/注册后可看大图
8 W: Q8 S, \9 a3 |3 m. I
2、第二行只有中间图片的最有边距是5px;布局如下:
) o% O# x5 z9 ~& V+ U3 g2 }

1 O1 ^& w! j( n: h. K1 d                               
登录/注册后可看大图

) H3 E5 ^% b* ]7 i% c注意:使用box-sizing: border-box后如果没有其他样式,所有的块将全部贴在一起,中间是没有任何间距的。这也是一个很经典的布局6 W- [: ^3 q4 F% T
  二、使用display:inline-block
# \/ O$ i! G" ]; F( L. p  display:inline-block大多数用于行块的转换,不建议使用此属性来进行行列布局。因为inline-block不能完全代替float
) e" k/ g! l; [8 @+ ]
) o& {8 C% s+ s
                               
登录/注册后可看大图

" D& i6 }' G: |9 `( [2 v红框中的布局就是使用display:inline-block最经典的布局。6 p3 z% U- x4 v* m1 Q9 @) M
6 V7 [! B1 R/ i4 g  k5 W) k" C
                               
登录/注册后可看大图
+ }0 R4 K' r, V' ?* O; c4 `& i1 N
此处使用了伪类,关于伪类的定义是使用后面会有专门的笔记来记录,这里就不赘述了。0 F# z7 P9 \/ e7 ^" M- |2 {& u
  此出还有一个经典的布局:9 O! `6 y; X9 N! C# f

5 r5 B" T* k* o  B$ O5 Q                               
登录/注册后可看大图

  c5 S) q' ], ~( I* w这种布局一般是:0 i) b" a, H1 Q- h6 n
 <div>
/ ?: }: [! m7 }5 h) F$ D) h            <img src="" alt="">
! k# k( g1 ]1 E: v, z2 y& d! M            <p>$ l! w! O& g; G! a# B, o2 F" p
    测试勿拍8 Z& {) x/ n. B- h: W
            </p> ( I+ L3 J" g5 Y9 N
</div>) S9 c) V: P' H) T' T6 h( G
  使用定位position:absolute常用于左边固定,右边自适应的情况。) f, W; U7 N! A3 U; C/ K
  1. 对div进行相对定位# h+ a1 C6 s% r" ]# S; @
  2. 对img进行绝对定位  E% n; a3 ?; D! D' ~* p" r
  3. p进行相对定位3 ~) S! B, y8 n! L
  注:固定宽度列的高度>自适应宽度列?
( q; X3 N5 B3 g+ A  三、使用flexible box实现 真正意义上的流体布局. e) C$ k" U: L# @3 w: b
  这种方法本人还没有真正在实际操作中体验过,此处先记录下来~
1 P! N2 q6 e$ l( j7 W" v
0 N- m* w" Z! q  U- G/ r1 U) k- l" d) S6 y; h# P+ n( W
来源:博客园
4 p1 g9 k$ D" ]
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-5 22:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表