Question

我在任何浏览器中遇到百分比宽度元素的问题。如果你看看这个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为宽度：33.334％，这有点疯狂。

Answer 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%;

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

CSS百分比宽度晃动

2 个答案: