CSS百分比宽度左右晃动

我在任何浏览器中遇到百分比宽度元素的问题。如果你看看这个jsfiddle，并慢慢调整浏览器的大小，你会看到最下面一排的右侧摇晃。CSS百分比宽度左右晃动

HTML：

<div class='main'> 
    <section class='full'> 
     <div>1_1</div> 
    </section> 
    <section class='half'> 
     <div>1_2</div> 
    </section> 
    <section class='half'> 
     <div>1_2</div> 
    </section> 
    <section class='third'> 
     <div>1_3</div> 
    </section> 
    <section class='third'> 
     <div>1_3</div> 
    </section> 
    <section class='third'> 
     <div>1_3</div> 
    </section> 
</div>

CSS：

.main { 
    width: 400px; 
    margin: 0 auto; 
} 
div { 
    width: auto; 
    background: blue; 
    text-align: center; 
} 
.full { 
    float: left; 
    width: 100%; 
} 
.third { 
    float: left; 
    width: 33.3%; 
} 
.half { 
    float: left; 
    width: 50%; 
}

我理解的33.333％，三种宽度会加起来一共99.999％ - 但设置.full元素到99.999％导致半宽度工作（因为该行的宽度总计为100％）。

有没有解决这个问题，还是仅仅是事物的性质？

我能想到的唯一解决方法就是像..设置每隔三分之一格.third div宽度：33.334％这有点疯狂。

来源

2013-12-13 entozoon

百分比是由它们的性质不完全一样，所以它会在不同的浏览器的大小来显示不同的 - 尽管除了你测试它在不同浏览器尺寸上的外观外，我看不到许多人以这种风格调整浏览器的大小 - 大多数人会将它保持为一种尺寸，可能是最大化的。 – BFWebAdmin

这拨弄http://jsfiddle.net/drAWc/2/

.main { width: 100%; margin: 0 auto; } 
div { width: auto; background: blue; text-align: center; } 

.full { float: left; width: 100%; } 
.third { float: left; width: 33.33%; } 
.half { float: left; width: 50%; }

不会摇晃。

我已经设置了width: 100%;主DIV

来源

2013-12-13 10:09:40

在Firefox 17上它抖动！ – LinkinTED

我会给的33.4％一个widht三个div的之一。差别很小，你不会看到它，但它修复了抖动。

.third:first-child { width: 33.4%; }

但它不知怎么没有（检查http://jsfiddle.net/drAWc/1/）。

当代码被添加为内嵌式，以它的工作原理第一.third（检查http://jsfiddle.net/drAWc/3/）：

<section class='third' style='width: 33.4%;'><div>1_3</div></section>

来源

2013-12-13 10:27:19 LinkinTED

CSS百分比宽度左右晃动

回答

相关问题