1

我正在研究一个 4 列的 div 网格，当浏览器大小减小时，所有 div 的大小都会按比例缩小。
问题是我想在网格中有 2 个 div 大小（大和小），即大 div 是 2 列的宽度，而小 div 是一列的宽度。
这是我的代码和我遇到的问题：
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/
如您所见，我遇到的问题是，当引入更大的 div 大小时，较小的 div 与底部对齐，而不是所有这些都很好地融入了网格并与页面顶部齐平。
我以前使用过 masonry / isotope 插件，但我不确定它们是否真的与这样的事情相关。我不确定最好的解决方案是什么。

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 回答