仓酷云

标题: 学习下overflow办理float浮动后高度自顺应成绩 [打印本页]

作者: 金色的骷髅 时间: 2015-1-16 10:37
标题: 学习下overflow办理float浮动后高度自顺应成绩
说实话，我并不是反对div+css，但物生一利，必生一弊，div+css的利处大家说了很多，我就说说狂热的追求div+css的几个弊端：

大概你在做网页的时分发明，发一个区块内的元素被使用了float以后，那末全部box的高度对就不以被浮动工具的高度为尺度了。
如图中的乡村导航内的乡村列表中接纳了float以后，谁人外框的高度并非内容元素的高度：

怎样办理这个成绩呢？经发明能够接纳overflow来办理！办法是在父元素加上以下代码便可

overflow:auto;zoom:1;

overflow:auto;是让高度自顺应，zoom:1;是为了兼容IE6，也能够用height:1%;的体例来办理。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>float浮动以后的成绩</title><style>*{padding:0;margin:0;}body{font-size:12px;line-height:150%;}ul{list-style:none;}.container{width:700px;margin:0auto;}.header,.footer{height:60px;background:#99CC66;margin-bottom:6px;font-size:18px;font-weight:bold;}.main{}.left{float:left;width:200px;}.sidepanel{border:1pxsolid#CC6600;margin-bottom:8px;}.sidepanelh2{font-size:12px;background:#CC6600;height:24px;line-height:24px;text-indent:20px;color:#fff;}.city{padding:6px0px;overflow:auto;zoom:1;}.cityli{float:left;width:35px;text-align:center;}.right{margin-left:200px;background:#CCCC66;height:240px;}.hotinfo{padding:6px;}.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}</style></head><body><divclass="container"><divclass="header">header</div><divclass="main"><divclass="left"><divclass="sidepanel"><h2>乡村导航</h2><ulclass="city"><li>北京</li><li>上海</li><li>天津</li><li>南京</li><li>广州</li><li>重庆</li><li>济南</li><li>杭州</li><li>郑州</li><li>北京</li><li>上海</li><li>天津</li><li>南京</li><li>广州</li><li>重庆</li><li>济南</li><li>杭州</li><li>郑州</li></ul></div><divclass="sidepanel"><h2>抢手文章</h2><ulclass="hotinfo"><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留<fontcolor="#43FF73">指纹</font></li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li><li>本月20日起出境日本须留指纹</li></ul></div></div><divclass="right">右边内容</div></div><brclass="clearfloat"/><divclass="footer">footer</div></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过

作者: 愤怒的大鸟 时间: 2015-1-18 07:17
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 老尸 时间: 2015-1-25 17:21
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

作者: 爱飞 时间: 2015-2-3 12:15
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 小魔女 时间: 2015-2-8 23:43
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 蒙在股里 时间: 2015-2-26 14:44
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

作者: 深爱那片海 时间: 2015-3-8 15:51
滚动条)层属性--溢出(visible/hidden/scroll/auto)

作者: 精灵巫婆 时间: 2015-3-16 05:25
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 活着的死人 时间: 2015-3-22 20:50
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

欢迎光临仓酷云 (http://ckuyun.com/)