Heim > Artikel > Web-Frontend > 请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
请问，css布局总宽度没超过父框架，为什么会 错位？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:43:191111Durchsuche
<!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
;层后面的分号去掉就可以啦,,层外面多加了一个分号了 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
Vorheriger Artikel：腾讯微博布局实现_html/css_WEB-ITnoseNächster Artikel：关于jQuery的一个例子_html/css_WEB-ITnose