0

私は次のように作成しようとしています。基本的にはページが6つに分かれています

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

しかし、私が得ているものは次のようになります:

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

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 が 50% ではなく 10% のようなものを占めているのはなぜですか?

4

3 に答える 3

0

あなたは正しい考えを持っています。前後の<div>タグを取り除くだけです。divは自動的に 2 行目に収まるので、必要ありません。そこにこれらの div タグがある場合は、その親 div に合わせているため、思ったよりも小さくなります。o1,o2,o3o4,o5,o6oo1,o2,o3

実際の例については、 を参照してください。見やすいように枠をつけました。 http://jsfiddle.net/WD79x/1/

于 2013-09-26T21:41:20.827 に答える
0

を使用した 1 つの方法を次に示し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 に答える