189 8069 5689

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

以上为正确的左右结构总宽度刚好等于400px

错误：
假如我们在总宽度不变情况下，左边为300px，而右边为120px那总宽度超过了20px，我们看看会出现什么问题，DIV+CSS代码如下：

      .yangshi{width:400px;} .zuo{ float:left; width:300px; background:#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; background:#CCC;} .you{ float:right; width:98px; background:#999; border:1px solid #F00;}     左边300px 右边100px   

因左右结构都有1px的宽度这个时候各需要减去左右2像素的边框宽度，所以左边最后是298px，右边为98px的宽度

DIV+CSS设置百分比宽度计算
有时候我们也需要使用百分比来计算宽度，通常情况也是总的百分比宽度，不能超过100%

到此，关于“DIV CSS宽度计算的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！