Home > Article > Web Front-end > 请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:43:191112browse
<!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"> *{ margin:0; padding:0; border: 0; } .layoutDemo { width: 960px; background: #000; } #left { width: 220px; float: left; margin-right: 20px; background: green; border: 0; } #main-content { width: 720px; float: left; background: gray; } #content { width:960px; overflow: hidden; } </style></head><body> <div class="layoutDemo"> <div id="left" class="aside innerPadding border">Left Sidebar</div>; <div id="main-content" class="article innerPadding border">Main Content</div> </div></body></html> 回复讨论(解决方案)
这些类中（aside innerPadding border），只要有一个是设置了border宽度，padding,margin，且不为0值，总宽度就会超出
border， padding,margin 都为0，但还是有问题
220+20+720 == 960
那估计你是在ie6下测试的，因为ie6的盒模型是不规范的。
还有一种可能，你的代码处在浏览器的混杂模式下
<!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"> *{ margin:0; padding:0; border: 0; } .layoutDemo { width: 960px; background: #000; } #left { width: 220px; float: left; margin-right: 20px; background: green; border: 0; } #main-content { width: 720px; float: left; background: gray; } #content { width:960px; overflow: hidden; } </style> </head> <body> <div class="layoutDemo"> <div id="left" class="aside innerPadding border">Left Sidebar</div> <div id="main-content" class="article innerPadding border">Main Content</div> </div> </body> </html> 上面的代码就正常了,把
Left Sidebar
;层后面的分号去掉就可以啦,,层外面多加了一个分号了 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：腾讯微博布局实现_html/css_WEB-ITnoseNext article：关于jQuery的一个例子_html/css_WEB-ITnose