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类是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/

Answer 2

这是一种方法，使用position:absolute。

Demo

<强> HTML

<div class="paginationPage">
    <div id="insertionGrid">
        <div class="top">
            <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 class="bottom">
            <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>

<强> CSS

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

.oneSixth {
    width:33.33333%;
    position:absolute;
}
.top .oneSixth:nth-child(even),
.bottom .oneSixth:nth-child(odd) {
    background-color:red;
}
.top .oneSixth:nth-child(odd),
.bottom .oneSixth:nth-child(even) {
    background-color:blue;
}
.oneSixth:nth-child(1) {
    left:0;
}
.oneSixth:nth-child(2) {
    left:33.33333%
}
.oneSixth:nth-child(3) {
    right:0
}
.top .oneSixth {
    top:0;
    bottom:50%;
}
.bottom .oneSixth {
    top:50%;
    bottom:0;
}

Answer 3

@Brian Ray是对的。

“但是，我猜它与.oneSixth div的容器没有高度设置有关。由于百分比高度是基于父母的高度，没有上课的s应该有他们的高度设置为50％，而.oneSixth divs的高度应设置为100％。“

div的CSS高度不正确

3 个答案: