CSS三行三列自适应高度div布局

社区医院12345

社区医院12345

2016-02-19 18:31

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS三行三列自适应高度div布局,希望可以对大家能有小小的帮助。

此代码欢迎各位转摘;网上有好多,但没有真正的自适应高度,看到一个自适应宽度的,还可以,没有我们长用的控制一定宽度的。
测试通过:IE5、IE5.5、IE6、IE7、FF其他的没有测试,如果有问题在下面留言。
说下主要的CSS在此页面的作用,:overflow:hidden;强制contain自适应高度(看背景),clear:both这个就不用说啦!
[html]
style type="text/css"
body{text-align: center;}
div{border:1px solid #f60; text-align:left;}
#head{
width : 780px;  
margin: 2px auto;
}
#contain{ margin:0 auto; overflow:hidden; background:#eee;
width: 780px;
}
#left{
float: left;
width:  150px;
margin: 2px 2px 0px 0px;
}
#middle{
float:left;
width:  465px;
margin: 2px 0px 2px 0px; 
}
#right{
float:right;
width:  150px;
margin: 2px 0px 2px 0px; 
}
#foot{
clear:both;
width:778px;
margin:2px auto;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

}
/style
div id="head"
  phead/p
  phead/p
/div
div id="contain"
  div id="left"leftbr
  leftbr
  left/div
  div id="middle"middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middlebr
  middle/div
  div id="right"right/div
/div   
div id="foot"foot/div
[/html]

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS三行三列自适应高度div布局

Web开发
CSS三行三列自适应高度div布局

CSS三行三列DIV高度自适应的设置

Web开发
CSS三行三列DIV高度自适应的设置

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS布局实例:上中下三行,中间自适应

Web开发
CSS布局实例:上中下三行,中间自适应

Div + CSS高度自适应解决方案

Web开发
Div + CSS高度自适应解决方案

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Div + CSS 高度自适应解决方案

Html CSS布局 Div+CSS XHTML
Div + CSS 高度自适应解决方案

DIV+CSS:网页一行两列背景自适应

Web开发
DIV+CSS:网页一行两列背景自适应

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何对Oracle数据库文件进行恢复与备份

如何对Oracle数据库文件进行恢复与备份

Oracle 9i个人版出现的错误信息

Oracle 9i个人版出现的错误信息
下拉加载更多内容 ↓