设为首页
收藏本站
最新电影
> 子栏目 Asp | Jsp | XML | XSL | Div+Css | 自定义函数 | 数据库 | 脚本特效
您现在的位置: 首页=>后台技术=>div+css 订阅本栏目  
像table一样布局div
时间: 2007-09-27 11:15:43 阅读次数:5413

第 1 页 像table一样布局div[1]
第 2 页 像table一样布局div[2]









翻译自: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优先选择显示其间的内容飞飞Asp技术乐,园

然后在CSS中也增加一个判断,配合xhtml,用浮动对齐(浮动对齐就不用解释了)的方式来实现容器的等高并排放置,但是还是无法真实的实现等高,你可以采用添加背景颜色的视觉错觉来实现视觉上的等高,或者采用别的方法,这里就不进行说明了飞飞Asp技术乐园下面是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支持第一个模型,要么我们可能会想出更好的方案来但是这次尝试是有价值的

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


[上一页] [下一页]
站内搜索    

下一篇z-index在IE中的迷惑

上一篇多点调用的 选项卡

本栏目最新 栏目最新列表
微软IE调试工具:SuperPreview for IE(ie6
精选15个国外最流行的CSS框架
CSS2 Media类型使用方法及简介(@Media)
浏览器排版/布局 图片下方出现空隙的问题
使用IE浏览器a链接失效(不能点击)的解决方
网站优化策划 栏目最新列表
增加网站外链的快速方法
网站上线前必做的30个检查
新的友情链接参考标准(没有google的PR情况
优化Google的AdSense广告的五个工具
王通讲SEO八大基础
站点最新 站点最新列表
微博推广的一些技巧
xhEditor v1.1.7 发布,
收集的一些轻量级非常实
50个新鲜兼容最新版本的
javascript中cookie的设
Excel中出现#VALUE!、#D
jquery插件:飞飞表情插件
十个使用HTML5开发的精彩
支持HTML5的浏览器有哪些
飞妮莫属:漫画:如何写出
历史最热10条信息  
AWStats安装QQ传真IP插件
MIME介绍 及 [1] [2] [3]
巧用Google和迅雷来下载
Transact SQL 常 [1] [2]
VIA Rhine II Fast Ethe
电脑常用端 [1] [2] [3]
Do you get a kick out
十道羊皮卷 欣赏+mp3版+
每日一句:A friend and
经典__悟透JavaScript
相关文章
网页布局的位置重心
Div+CSS布局入门教程
垂直三栏布局拥有相
CSS基本布局16例
css布局中的居中问题
DIV+CSS一行两列布局
像table一样布局div
浏览器排版/布局 图
使用DIV+CSS布局的优
 
 width= 
伟哥博客 西安房产 123最新电影 三四六四