关注互联网、体验互联网,记录成长历程

取巧的边框等高

2009-12-15

css_border左右结构是平常页面中最经常看到的结构,简洁一些的页面就会使用边框将左右两边隔开,但往往由于左右两边的内容可能是不等高的,所以就会有一高一低的现象。这个时候不管是给A写个边框还是给B写个边框,都会有高低不平,解决这个边框的高低不平之前有看过很多解决方法,但总的来说有些复杂,其实有一种取巧的方法就可以做到,那就是利用CSS属性中的负值。

比如这个示例图中的边框,取一个DIV将A、B两部分都包容起来,然后写border:1px solid #000;再给A容器写右边框border-right:1px solid #000;B容器也写边框border-left:1px solid #000;这样不管哪边高哪边低,都会保证起码有一条边框线是从头到底的。

但这样两条边框线就会造成重复,于是可以给B容器写margin-left:-1px;这样让两条边框重叠在一起,即可解决边框重复的问题。

PS:回头一看,写了个这么囧的日志,算了,既然写了就发了吧。

分类目录:前端开发 | 标签: | 查看:6,665

5 条评论

  1. 王涛 说道:

    。。。
    不懂。

  2. slowsay 说道:

    呵呵,要实现这样两个也都可以outbox{border:1px solid #000}
    然后其中一个A{border-right:1px solid #000;}或B{border-left:1px solid #000;}就可以
    具体的实现,还是需要width的准确计算,或用%
    以上做法,四大浏览器好像没看到bug
    如果与其他多重复结构,可能会有,呵呵

    • 摄氏度 说道:

      只写其中一个的话,会有问题的,比如写在A上面,结果B的高度要高于A,那么A的边框只到A本身的高度,B高出的那一截就空了。

  3. 庸水禅 说道:

    学习了~~~

  4. xibeiwolf 说道:

    学习了

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>