zoukankan      html  css  js  c++  java
  • [转自blueidea]像table一样布局div II

    翻译自:Equal height boxes with CSS part II
    原文
    http://www.456bereastreet.com/archive/200406/equal_height
    _boxes_with_css_part_ii/

    下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧

    上一篇的问题就是,这个模型对IE来说等同于垃圾,所以基本只能是做来玩玩而已,没有什么实际的用处,现在我要做的就是,
    让它也能在IE下更好的显示,所以我又做了 第二个模型

    xhtml结构类似 第一个模型 的只是增加一个新的div给IE

    <div class="equal">
        <div class="row">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
            <!--[if IE]>
            <div class="ieclearer"></div>
            <![endif]-->
        </div>
    </div>

    给xhtml增加一个判断,判断是否为IE,然后给IE一个特殊待遇,在IE显示和别的浏览器不同的代码,对于这个判断IE\MAC优先选择显示其间的内容。

    然后在CSS中也增加一个判断,配合xhtml,用浮动对齐(浮动对齐就不用解释了)的方式来实现容器的等高并排放置,但是还是无法真实的实现等高,你可以采用添加背景颜色的视觉错觉来实现视觉上的等高,或者采用别的方法,这里就不进行说明了。下面是CSS中的代码

    <!--[if IE]>
        <style type="text/css" media="all">
    .equal, .row {
        display:block;
    }
    .row {
        padding:10px;
    }
    .row div {
        display:block;
        float:left;
        margin:0;
    }
    .row .two {
        margin-left:10px;
    }
    .row .three {
        160px;
        float:right;
    }
    .ieclearer {
        float:none;
        clear:both;
        height:0;
        padding:0;
        font-size: 2px;
        line-height:0;
    }
        </style>
    <![endif]-->

    到此,整个设计真正的完成了,虽然不够完美,对非IE而做出努力显得有点多余,现在要么IE支持第一个模型,要么我们可能会想出更好的方案来。但是这次尝试是有价值的。

    经典论坛讨论
    http://bbs.blueidea.com/thread-2459988-1-1.html

    作者:菩提树下的杨过
    出处:http://yjmyzz.cnblogs.com
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    JSTL&EL
    Response
    HTTP、Request
    Tomcat、Servlet
    单片机概念及应用
    JQuery高级
    Jquery基础
    JavaScript
    HTML、CSS
    跟着文档学习gulp1.2创建任务(task)
  • 原文地址:https://www.cnblogs.com/yjmyzz/p/1014985.html
Copyright © 2011-2022 走看看