CSS网页布局错位的方法

     .yangshi{width:400px;} .zuo{ float:left; width:300px; bac千克round:#CCC;} .you{ float:right; width:100px; background:#999}     左边300px

错误： 假设我们在总宽度执拗情况下，左边为300px，而左侧为120px那总宽度超过了20px，我们看看会呈现甚么问题，DIV+CSS代码下列：

      .yangshi{width:400px;} .zuo{ float:left; width:300px; bac公斤round:#CCC;} .you{ float:right; width:120px; background:#999}     左边300px 左侧100px   

我们依据上图可看出因为总宽度梗概了20px，以是导致了摆布结构不能平齐，就呈现了右边往下掉。 何等就出现了错位的兼容标题，多数在理论中由于咱们算计的忽略，一样平常相差小的时辰是1px-2px，那样就不会被咱们缔造，所以拂拭错位兼容可以从宽度算计着手。

例二：支配结构中有1px边框实例 一样平常摆布结构中有1px边框，今后再加上有些边框这时咱们设置摆布结构时辰就重要将此边框宽度和摆布结构宽度共计在一起。 准确例子： CSS与html代码以下：

      .yangshi{width:400px;} .zuo{ float:left; width:298px; border:1px solid #F00; bac公斤round:#CCC;} .you{ float:right; width:98px; bac公斤round:#999; border:1px solid #F00;}     左边300px 右边100px   

关于“CSS网页布局错位的方法”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“CSS网页布局错位的方法”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。