鱼C论坛

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

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

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

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

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

x
本文和大家分享的主要是css中横列布局相关内容,一起来看看吧,希望对大家学习css http://www.maiziedu.com/course/web/有所帮助。
9 _7 n4 H" P# v* @6 \9 Z- p. Y  1、第一行第一个图片和最后一个图片的左右边距是10px,中间图片的左右边距是5px。布局如下:3 ]' q3 @+ R1 @5 }8 r! j& w1 q0 g3 k

/ ]5 f. ?+ B3 K. M( [- `                               
登录/注册后可看大图
+ J. y/ d- p' M7 p
2、第二行只有中间图片的最有边距是5px;布局如下:
" K- [+ q+ e8 L4 ~' C$ m/ p

4 I/ L7 b. j; O                               
登录/注册后可看大图

0 Y  z3 q/ E5 z" e5 C注意:使用box-sizing: border-box后如果没有其他样式,所有的块将全部贴在一起,中间是没有任何间距的。这也是一个很经典的布局& s" x7 W) K  X2 s) a# W' b6 c
  二、使用display:inline-block
3 A0 ?$ ]* U! l+ K4 q# f  display:inline-block大多数用于行块的转换,不建议使用此属性来进行行列布局。因为inline-block不能完全代替float+ I$ ?! O4 x7 D: X/ S5 n0 U% H
( R2 C5 H+ p/ s
                               
登录/注册后可看大图
  L3 U% w' A7 i
红框中的布局就是使用display:inline-block最经典的布局。
# b: I& L0 H3 O% a/ `: Z4 F

; v/ m" g  ^1 m7 _0 B( l+ G                               
登录/注册后可看大图

( f, c4 J: B" w此处使用了伪类,关于伪类的定义是使用后面会有专门的笔记来记录,这里就不赘述了。
% o2 B! K5 j, i- y6 A0 F! r, d5 k  此出还有一个经典的布局:. }/ l% c5 b. ]( I: h9 Z
5 R0 E; H% A& d# D
                               
登录/注册后可看大图

9 A, M3 @5 h0 ^3 ^7 ]这种布局一般是:% w/ ?$ P% d0 }9 m% {" ?
 <div>
0 h$ ~" I2 Y5 y) C* \' h+ ~            <img src="" alt="">
* P% e2 F) f( e            <p>
6 b. A  [( h. L: u$ o2 r; ]    测试勿拍
' d/ b3 G9 M. |: m            </p>
5 W' b4 }, e1 A* t! b& r  i4 d</div>8 q  r  e9 [9 {1 B& \" p
  使用定位position:absolute常用于左边固定,右边自适应的情况。
, B3 y1 G) ^) g3 A! t  1. 对div进行相对定位; e3 L4 [  c* Q9 ?. i- ~6 F
  2. 对img进行绝对定位, |% B$ _  [4 C8 g! L' ^4 o
  3. p进行相对定位& U. H" b. Z: q6 q
  注:固定宽度列的高度>自适应宽度列?
: D: e, X; ?* `) [4 s! H  三、使用flexible box实现 真正意义上的流体布局
6 `* ~3 W: Y4 T  X  这种方法本人还没有真正在实际操作中体验过,此处先记录下来~
: ^% f$ A* q  n6 E" E  W" E# W1 Z$ M2 x3 a- n' b

& J9 H4 t/ T( X" l5 D4 t来源:博客园
) X3 J+ m$ m2 @) m# G- l  {. H! y
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

GMT+8, 2025-10-22 16:41

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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