1

私は 4 列の div グリッドに取り組んでいます。ブラウザのサイズが縮小されると、すべての div のサイズが比率で縮小されます。
問題は、グリッド内に 2 つの div サイズ (大小) が必要なことです。つまり、大きな div は 2 列の幅で、小さな div は 1 つの幅です。
これが私のコードと私が抱えている問題です:
HTML:

<div id="thumb-wrap">

    <div id="thumb-container-2">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #ffe413;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #8ca4a5;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f9ded6;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f57882;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #eaebe6;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #ffe93b;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f3f3f4;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #003738;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #939597;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #e6e7e0;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #f14e5b;">
            some text
        </div>
    </div>

    <div id="thumb-container">
        <div class="thumb-dummy"></div>
        <div class="thumb-element" style="background-color: #de4d79;">
            some text
        </div>
    </div>  
</div>

CSS:

#thumb-wrap {
    position: absolute;
    width: 95%;
    left: 3%;
    top: 40px;
    font-family:'Neuzeit S LT W01 Book', Helvetica, sans-serif;
    font-size: 14px;
    padding-bottom: 150px;
}

#thumb-wrap a {
    opacity: 1.0;
}

#thumb-wrap a:hover {
    opacity: 0.6;
    text-decoration: none;
}

#thumb-container {
    display: inline-block;
    position: relative;
    width: 24%;
    padding-left: 0.5%;
}

#thumb-container-2 {
    display: inline-block;
    position: relative;
    width: 49%;
    padding-left: 0.5%;
}

.thumb-dummy {
    padding-top: 66%;
}

.thumb-element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    border: 2px solid white;
    padding-top: 19px;
    background: no-repeat 50% 50%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

動作中のデモjsfiddleもここにあります: http://jsfiddle.net/jzgSP/
すべてがグリッドにうまく収まり、ページの上部とぴったり重なっています。
以前に石工/同位体プラグインを使用したことがありますが、実際にこのようなものに関連しているかどうかはわかりません。最善の解決策が何であるかはわかりません。

4

1 に答える 1

1

さまざまな div をラップするには、それらをフロートする必要があります。実用的な例がありますが、マージンが難しいです。

http://jsfiddle.net/jzgSP/3/

#thumb-container, #thumb-container2 {float: left;}

更新: コンテナーにパディングするのではなく、#thumb-wrap でマージンを使用して近づきます: http://jsfiddle.net/jzgSP/4/

再度更新: 私は Firefox で作業していますが、要素を設定したときに 100% の確率で要素を相互にクリアする唯一の方法は、奇数の div 幅を使用することです。理由は特定できませんでしたが、私の推測では、境界線の太さの計算が機能していると思われます。

http://jsfiddle.net/jzgSP/7/

#thumb-container {width: 24.01%;}
#thumb-container2 {width: 48%;}
于 2013-01-27T02:05:42.713 に答える