CSS 百分比宽度抖动

Posted 2023-03-10

【中文标题】CSS 百分比宽度抖动

【英文标题】：CSS Percentage Widths Jiggling Around

【发布时间】：2013-12-13 09:38:19

【问题描述】：

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

http://jsfiddle.net/drAWc/

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%，这有点疯狂。

【问题讨论】：

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

【参考方案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>