Would you like to react to this message? Create an account in a few clicks or log in to continue.

搜索
 
 

结果按：
 

Rechercher 高级搜索

关键词

最新主题
» js在html中的加载执行顺序
纯CSS实现三列DIV等高布局 Empty10/09/13, 06:50 am 由 design_ss

» javascript 函数的方法call()和apply()
纯CSS实现三列DIV等高布局 Empty09/09/13, 05:10 am 由 design_ss

» JS中typeof与instanceof的区别
纯CSS实现三列DIV等高布局 Empty08/08/13, 11:10 am 由 design_ss

» JS中的构造函数解析
纯CSS实现三列DIV等高布局 Empty08/08/13, 09:44 am 由 design_ss

» js对象属性方法大总结
纯CSS实现三列DIV等高布局 Empty08/08/13, 08:46 am 由 design_ss

» js中的值类型和引用类型小结 文字说明与实例
纯CSS实现三列DIV等高布局 Empty08/08/13, 06:35 am 由 design_ss

» CSS3中轻松实现渐变效果
纯CSS实现三列DIV等高布局 Empty05/07/13, 09:48 am 由 design_ss

» jQUery 常用实例
纯CSS实现三列DIV等高布局 Empty03/07/13, 09:56 am 由 design_ss

» mask_layer 遮照
纯CSS实现三列DIV等高布局 Empty03/07/13, 08:18 am 由 design_ss

十一月 2024
周一周二周三周四周五周六周日
    123
45678910
11121314151617
18192021222324
252627282930 

日历 日历

合作伙伴
免费论坛

免費論壇




纯CSS实现三列DIV等高布局

 :: 前端制作 :: 重构

向下

纯CSS实现三列DIV等高布局 Empty 纯CSS实现三列DIV等高布局

帖子  design_ss 19/03/12, 09:45 am

DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；
还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！

现在我们来看看真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：


html代码：
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>


css代码：
<style type="text/css">
body, p, ul { margin:0; padding:0; }
#wrap { overflow:hidden; width:1000px; margin:0 auto; }
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }
#left { float:left; width:250px; background:#00FFFF; }
#center { float:left; width:500px; background:#FF0000; }
#right { float:right; width:250px; background:#00FF00; }
</style>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS等高布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>

文章出处：标准之路(http://www.aa25.cn/css_example/858.shtml)


design_ss

帖子数 : 122
积分 : 373
威望 : 0
注册日期 : 11-12-28

返回页首 向下

返回页首

 :: 前端制作 :: 重构

 
您在这个论坛的权限：
您不能在这个论坛回复主题