【摘要】 在项目开发过程中的会员中心页碰到了一个中线,然后发散思维,要求中间的线自适应高度,想了七种方案。 如图效果:   方案一:左边标签设置左边框,右边标签设置左边框,利用……

在项目开发过程中的会员中心页碰到了一个中线,然后发散思维,要求中间的线自适应高度,想了七种方案。

如图效果:

 

方案一:左边标签设置左边框,右边标签设置左边框,利用负margin边框重叠

很“保险”(使程序输出的时候左边和右边任意一边内容为空甚至标签不输出都正常显示),多了一个多余标签。

 

方案二:设置父容器左边框,父容器margin-left,子元素父margin拉回。

很保险,可维护性扩展性低,如果父容器要设置外面的边框则需再外套一个标签。

 

方案三:定义一个 “线”的class,绝对定位。

可全站通用,对付IE6需要设置一个及长的高度不太合理。

 

方案四:使用图片背景平铺于内容区

代码不贴了:

多余了一张图片,而且一张图只能对应一个宽度,扩展性低。

 

方案五:利用图片转base64编码

代码不贴了:

一般转码后的编码比另存的图片大1/3,base64编码不兼容IE/IE7,一张图适应一个宽度。

 

方案六:使用表格table,利用其高度自适应性

方案七:左边标签绝对定位自适应容器高度

转载: CSS七种方法实现分割中线

转载请注明:Devin >> CSS七种方法实现分割中线

我来说说

发表评论您必须先登录

In 2018

虚长三十而立Flag

  • 1. 生娃,并为他拿起狗头单反,背诵历史纪元表;
  • 2. 认证PMP;
  • 3. 和老外讨论工作无需翻译;
  • 4. 参与一项硬件研发项目的产品设计;
  • 5. 带老婆玩,带父母玩。

精彩爽文,窗边小说,关注送礼

In 2017

墨刀

二十岁时打架,兄弟多,那是面子,敢惹事那叫魄力!现在打架了,悄悄的,真怕身边的朋友笑话!

从前,天天喝大酒,唱歌,通宵KTV,那叫会玩。现在低调做人,约上三五知己喝喝茶,到公园跑两圈,多陪陪家人,那叫靠谱!

不管你混的多牛逼,多有钱,做和你年龄匹配的事,这叫责任! 也叫成熟!

10年前发个脾气,牛都拉不回来。10年后生个气,转眼就觉得没必要。时间渐渐磨去了年少轻狂,也渐渐沉淀了冷暖自知。

10年前,连多愁善感都要吹得惊天动地 ,10年后,越痛越不动声色;越苦,越保持沉默 。

10年前,我们本着糊涂装明白。10年后,我们本着明白装糊涂。成长就是将你的一切都变成心静如水。

In 2016

放下,守心,承担
独立自主
敢想敢做,而能不计旁人眼光
说走就走,而能不再瞻前顾后

In 2015

愿这一年,

不再蹉跎、不作妄谈,
可以抱有千种期许,但至少播种一个开端;

不必发狠、不求看穿,
懂得各有山高水长,不必苦求同路与照看;

依然敢爱、敢离开,
从错误里汲取、在行走中放下,
平常应对平淡,平心看待平凡;

生活若能精彩更好,
但更重要的自己开心,家人幸福。

About Devin

昵称:Devin
性别:男性
邮箱:atDevin#qq.com

本人的长相


简历:

2015-2017 长虹智慧健康 .产品经理岗
2012-2015 苏宁易购 .广告媒介岗
2008-2012 中国矿大 .电子商务

简介:


男、爱生活、爱世界

许可


本博客采用“知识共享署名-非商业性使用-禁止演绎 3.0 Unported许可协议”进行许可。基于“www.atdevin.com”上的作品创作。本博未注明转载的作品皆为本博原创。

知识共享@中国大陆知识共享署名-非商业性使用-禁止演绎