分享用纯CSS实现三列DIV等高布局的方法_程序开发

分享用纯CSS实现三列DIV等高布局的方法

创始人

2024-07-31 00:51:40

0次

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

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

html代码：

 
 
left
 
left
 
left
 
left
 
left

center

right

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; }  
 
  
  
  
  
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;  
}

 
 
 
 
 
left
 
left
 
left
 
left
 
left

center

right

【编辑推荐】

CSS自定义滚动条样式
Div+CSS常见错误总结
div+css牛人也得看的15个css
非常优秀的jQuery+CSS实现动态导航菜单教程
10 个漂亮的 CSS3 表单制作教程

上一篇：手机安全软件使用意识仍然匮乏

下一篇：参加IPv6日的运营商名单

分享用纯CSS实现三列DIV等高布局的方法

相关内容

热门资讯