Maison > Article > interface Web > 请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-21 09:43:191112parcourir
<!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
;层后面的分号去掉就可以啦,,层外面多加了一个分号了 Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：腾讯微博布局实现_html/css_WEB-ITnoseArticle suivant：关于jQuery的一个例子_html/css_WEB-ITnose