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百分比寬度左右晃動

回答

相關問題