Heim >Web-Frontend >HTML-Tutorial >CSS布局overflow hidden的说明 没搞懂。_html/css_WEB-ITnose

CSS布局overflow hidden的说明 没搞懂。_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:12:061170Durchsuche

代码如下。
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档





        
new_list




    
运行代码后在IE7和IE6下的显示示例。

在IE8.0下的显示实例


我想问的就是。
在#con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}
加入 overflow:hidden;以后ie7和IE8都显示一样的结果了。那明明overflow:hidden;是隐藏超出部分。为什么还有这个功能?》
http://www.viuoo.com/a/DIV/2012_0602_114.html  这个是原始地址。大家帮忙理解下。


回复讨论(解决方案)

楼主 这是清除浮动的简便方法,

<!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>无标题文档</title><style type="text/css">#con_t{ width:960px; height:auto; background:#CCC scroll 0 0; margin:0 auto; padding-bottom:20px;}#con_t .new_list{ width:250px; height:220px; border:1px #3F0 solid; float:left;}</style></head><body><div id="con_t"><div class="new_list">new_list</div><div style="clear:both;"></div></div></body></html>


具体可参见
http://www.zhangxinxu.com/wordpress/2010/01/%e5%af%b9overflow%e4%b8%8ezoom%e6%b8%85%e9%99%a4%e6%b5%ae%e5%8a%a8%e7%9a%84%e4%b8%80%e4%ba%9b%e8%ae%a4%e8%af%86/

更多方法可参考
http://www.qianduan.net/universal-to-remove-floating-style.html

楼主 这是清除浮动的简便方法,
HTML code

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


学习了,很有用


new_list



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn