[转自blueidea]像table一样布局div II

简介: 翻译自:Equal height boxes with CSS part II原文: http://www.456bereastreet.com/archive/200406/equal_height _boxes_with_css_part_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 {
    width: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

目录
相关文章
|
6月前
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
【冷门骚操作】利用display:table-cell实现div水平、垂直居中
|
4月前
|
JavaScript
ElementPlus的el-table-column如何添加超链接的代码
ElementPlus的el-table-column如何添加超链接的代码
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
element-ui里的el-table在grid布局下切换数据有滚动条时不断增加?
81 0
|
前端开发
table布局的一些总结
table-layout作用就是让表格布局固定,使表格的宽度不会根据内容多少而动态变化。
163 0
table布局的一些总结
|
JavaScript
el-table横向滚动条不显示问题
el-table横向滚动条不显示问题
1898 0
el-table横向滚动条不显示问题
|
JavaScript
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
2357 0
Element UI - el-table el-table-column v-if 切换,表头抖动解决方案
Element UI - el-table el-table-column v-if 切换,表头抖动解决方案
1324 0
|
Web App开发 前端开发 容器