CSS 百分比宽度抖动答案

【问题标题】：CSS Percentage Widths Jiggling AroundCSS 百分比宽度抖动
【发布时间】：2013-12-13 09:38:19
【问题描述】：

我在任何浏览器中都遇到了百分比宽度元素的问题。如果您查看这个 jsfiddle 并慢慢调整浏览器的大小，您会看到底行的右侧抖动。

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 设置为 width:33.334%，这有点疯狂。

【问题讨论】：

百分比本质上并不准确，因此它会在不同的浏览器尺寸下显示不同 - 尽管除了您测试它在不同浏览器尺寸上的外观之外，我看不到很多人调整浏览器的大小这种风格 - 大多数人会保持一种尺寸，可能会最大化。

标签： css alignment width shake

【解决方案1】：

这个小提琴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%; }

不会晃动。

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

【讨论】：

在 Firefox 17 上它会抖动！

【解决方案2】：

我会给三个 div 之一的宽度为 33.4%。差异是如此之小以至于您不会看到它，但它可以解决抖动问题。

.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>

【讨论】：