鱼C论坛

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

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

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

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

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

x
本文和大家分享的主要是css中横列布局相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。2 U- j& z6 B' J, N& D6 |7 h& @
  1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下:" d0 f5 h6 d8 T! f3 {( k
# X' i: n3 U, y/ m. s
                               
登录/注册后可看大图

( ]' a3 K$ D# W/ I: C8 ]% _2、第二行只有中间图片的最有边距是5px;布局如下:
5 l2 b5 k& n2 ?
' p1 s% M$ Z+ f! H3 ~: d
                               
登录/注册后可看大图
5 K) i* P& B5 [) G& S) {* G
注意:使用box-sizing: border-box后如果没有其他样式,所有的块将全部贴在一起,中间是没有任何间距的。这也是一个很经典的布局6 {2 ~& H* u7 L, n8 A8 W
  二、使用display:inline-block
. m. y$ q4 R) o$ o5 u  display:inline-block大多数用于行块的转换,不建议使用此属性来进行行列布局。因为inline-block不能完全代替float$ b. O; j% F/ s  Z' R! D( K
6 _5 ]' y& X% m& b4 K% H
                               
登录/注册后可看大图
/ y8 y6 U1 B! h% t: B& h' v
红框中的布局就是使用display:inline-block最经典的布局。  c  J7 t+ ]7 O5 D8 |; @  F

" F+ @, `# \7 S- k, w                               
登录/注册后可看大图

( J/ U3 G4 A. ?( b& n此处使用了伪类,关于伪类的定义是使用后面会有专门的笔记来记录,这里就不赘述了。* H* ~- B0 @0 ~
  此出还有一个经典的布局:
) W2 G" V3 L9 p

7 |6 K" z/ q1 V& Y7 F  }8 B                               
登录/注册后可看大图
: l" L4 S0 D: G% T$ @
这种布局一般是:" z% k1 S4 u% L9 s% t/ ]4 n1 C
 <div>
4 }3 H+ l( Q. ]! b9 y7 G            <img src="" alt="">
8 O9 P- f+ i1 r& X$ N            <p># i4 b& u5 T  ]2 C/ j" V0 d
    测试勿拍
# f, Q# |' i' E' f3 b. Y            </p>
' o8 j9 [) d' \, n% z7 y</div>% g+ r5 |1 _, U" j; o. C$ s- r
  使用定位position:absolute常用于左边固定,右边自适应的情况。* }& M1 S, L7 Q7 w2 U/ h- k
  1. 对div进行相对定位7 d/ l3 a6 O2 z( P
  2. 对img进行绝对定位! l" d! J; d5 J* p. Y" H$ O
  3. p进行相对定位& f+ B* v, F. Z, F: z
  注:固定宽度列的高度>自适应宽度列?" w) `% p# D/ G6 Z# q0 j0 X
  三、使用flexible box实现 真正意义上的流体布局
9 ]9 E' P8 H* X8 \3 o  这种方法本人还没有真正在实际操作中体验过,此处先记录下来~
' D) C+ i1 ?5 G2 f9 n# n1 s2 Q0 a0 \( ]6 N

' X* h8 C& L3 `9 e, a来源:博客园( E, E. C. H6 b8 ]8 m+ o. h
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

GMT+8, 2026-1-30 02:47

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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