0

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

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

但我得到的看起来像这样：

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

这是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 是 110 像素，里面的东西是高度 100%，除了一个第六类是 50%。那么为什么 oneSixth div 占据了 10% 而不是 50% 之类的东西呢？

4

3 回答 3

0

你有正确的想法。你只需要摆脱周围和周围的<div>标签。div将自动适应并填充到第二行，因此您不需要它们。如果你在那里有那些 div 标签，那么你正在适应它的父 div，这就是为什么它们变得比你想象的要小。o1,o2,o3o4,o5,o6oo1,o2,o3

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

于 2013-09-26T21:41:20.827 回答
0

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

演示

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;
}
于 2013-09-26T21:48:19.053 回答
0

@Brian Ray 是对的。

“但是，我猜它与没有设置高度的 .oneSixth div 的容器有关。由于百分比高度基于其父母的高度，因此没有类的 s 应该将其高度设置为50% 和 .oneSixth div 的高度应该设置为 100%。”

于 2013-10-24T15:42:03.310 回答