Home > Article > Web Front-end > div+css小疑问。_html/css_WEB-ITnose
div+css小疑问。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:44:23926browse
CSS
大家看一下这个left 和right 共同被一个#maincontainer div包裹。
代码如下。
#left { background: #eee; width: 350px; height: 400px; float: left; } #right { background: #ccc; width: 150px; height: 400px; float: right; } #maincontainer { width: 500px; overflow: auto; } #foot { background: #eee; width: 500px; height: 100px; } 运行起来是没有问题的 “这里为什么出现？” 是没有的。
但是为什么设计页面中要空出这一块呢？ 我并没有设置#maincontainer的height。
也没有任何的边框。为什么出现那一块了呢？ 运行起来却没有问题。看着真别扭。
求大神帮解答。
回复讨论(解决方案)
#foot{
clear:both
}
试试
*{margin:0;padding:0;}
LZ啥浏览器？
1楼和2楼的办法都可以试试
#foot { clear:both; background: #eee; width: 500px; height: 100px; } 测试了IE7、8、9、10和chrome，在IE7中出现这种现象，正在找解决方式。
<!doctype html><!-- Saved from html5snippet.net --><html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'/><style type='text/css'>body {background:lightblue;}div {margin:0;padding:0;}#left { background: #aaa; width: 35%; height: 400px; float: left; } #right { background: #ccc; width: 65%; height: 400px; float: right; } #maincontainer { clear:left; background: red; width: 100%; } #foot { background: #eee; width: 100%; height: 100px; }</style><script type='text/javascript'></script></head><body> <div id="left"></div><div id="right"></div><div id="maincontainer"></div><div id="foot"></div></body></html> 需要加上
层来清除浮动~~<div id="maincontainer"><div id="left"></div><div id="right"></div><div class="clear"></div></div><div id="foot"></div>
.clear{clear:both;background: none;border: 0;display: block;float: none;font-size:0;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0px;height:0px;line-height:0px;}#left { background: #eee; width: 350px; height: 400px; float: left; } #right { background: #ccc; width: 150px; height: 400px; float: right; } #maincontainer { width: 500px; overflow: auto; } #foot { background: #eee; width: 500px; height: 100px; } 需要加上
层来清除浮动~~<div id="maincontainer"><div id="left"></div><div id="right"></div><div class="clear"></div></div><div id="foot"></div>
.clear{clear:both;background: none;border: 0;display: block;float: none;font-size:0;margin:0;padding:0;overflow: hidden;visibility: hidden;width:0px;height:0px;line-height:0px;} #left { background: #eee; width: 350px; height: 400px; float: left; } #right { background: #ccc; width: 150px; height: 400px; float: right; } #maincontainer { width: 500px; overflow: auto; } #foot { background: #eee; width: 500px; height: 100px; } 大家误会了 我可能强调的也不对，这个是在VS2008的设计页面中的情况。浏览器运行是正常的。。。。
应该是上下div边距的问题
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS+DIV 的宽度和高度的自适应问题_html/css_WEB-ITnoseNext article：有一行代码看不懂，大神指教_html/css_WEB-ITnose