html - div 的 CSS 高度不正确

Question

我正在尝试制作以下内容，基本上是一页断了六页

__________
|  |  |  |
|  |  |  |
|__|__|__|
|  |  |  |
|  |  |  |
|  |  |  |
----------

但我得到的是这样的:

__________
|__|__|__|
|__|__|__|
|  |  |  |
|  |  |  |
|  |  |  |
|  |  |  |
----------

这是CSS:

.paginationPage {
    height: 110px;
    width: 82px;
    margin: 2px;
    background: #F9F9F9;
    border: 1px solid #CCCCCC;
}

#insertionGrid {
    position: relative;
    height: 100%;
    width: 100%;
}

#odds, #evens {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#odds {
    z-index: 1;
}

#evens {
    z-index: 2;
}

.insertionBlock {
    float: left;
}

.oneSixth {
    height: 50%;
    width: 33%;
}

.oneEigth {
    height: 25%;
    width: 50%;
}

这是 HTML:

<div class="paginationPage">
    <div id="insertionGrid">
        <div id="odds">
            <div>
                <div id="o1" class="oneSixth insertionBlock">&nbsp;</div>
                <div id="o2" class="oneSixth insertionBlock">&nbsp;</div>
                <div id="o3" class="oneSixth insertionBlock">&nbsp;</div>
            </div>
            <div>
                <div id="o4" class="oneSixth insertionBlock">&nbsp;</div>
                <div id="o5" class="oneSixth insertionBlock">&nbsp;</div>
                <div id="o6" class="oneSixth insertionBlock">&nbsp;</div>
            </div>
        </div>
    </div>
</div>

paginationPage 是 110px，里面的东西是高度 100%，除了 oneSixth class 是 50%。那么为什么 oneSixth div 占用了 10% 而不是 50% 呢？

Answer 1

你的想法是正确的。你只需要摆脱 <div>标签 o1,o2,o3及周边o4,o5,o6 . o div 会自动适应并填充到第二行，因此您不需要它们。如果你有那些 div 标签，你就适合你的 o1,o2,o3到它的父 div，这就是为什么它们变得比你想象的要小。

请参阅工作示例。我添加了一个边框，这样更容易看到。 http://jsfiddle.net/WD79x/1/