html - 将所有 div 高度设置为包装父行中最高

Question

http://jsfiddle.net/JNQBj/4/

HTML

<div class="rackRowWrapper">

    <div class="rackWrapper"><div class="smallRack"></div></div>
    <div class="rackWrapper"><div class="mediumRack"></div></div>
    <div class="rackWrapper"><div class="smallRack"></div></div>
    <div class="rackWrapper"><div class="largeRack"></div></div>
    <div class="rackWrapper"><div class="smallRack"></div></div>
    <div class="rackWrapper"><div class="mediumRack"></div></div>
    <div class="rackWrapper"><div class="largeRack"></div></div>
    <div class="rackWrapper"><div class="smallRack"></div></div>

</div>

CSS

.rackRowWrapper {
    font-size: 0;
}

.rackRowWrapper > * {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: -ms-linear-gradient(top, #FFFFFF 0%, #BABABA 100%);
    background-image: -moz-linear-gradient(top, #FFFFFF 0%, #BABABA 100%);
    background-image: -o-linear-gradient(top, #FFFFFF 0%, #BABABA 100%); 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #BABABA));
    background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #BABABA 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #BABABA 100%);
}

.smallRack {
    height: 200px;
    width: 100px;
}

.mediumRack {
    height: 100px;
    width: 100px;
}

.largeRack {
    height: 300px;
    width: 100px;
}

我有一堆不同大小的矩形。每当矩形不适合当前行时，display: inline-block 会导致它们被包裹，然后呈现在下面的行中。

我正在尝试提供一种视觉效果，使每个“包裹的行”看起来都不同。我不想手动创建用于嵌套矩形的行元素。我没有(简单的)方法来计算应该为给定区域呈现多少个矩形，我希望将计算留给浏览器。

因此，它变得有点棘手。如果我将渐变应用于 rackRowWrapper，则 entire 内容具有一个渐变。这不会产生不同行的错觉。

所以，我想我应该将每个矩形包裹在一个包裹的 rackWrapper 中，并在此级别设置渐变。然后，每当 rackWrapper 向下一层包装时......一个视觉上不同的新行出现。您可以在 jsfiddle 中看到这一点。

但是，因为我的元素是行内 block ，所以 rackWrapper 不会增长以适应行。这会导致我的梯度变形。

没有为每个矩形适本地计算我的渐变，以便渐变在每个矩形之间适当对齐——我在这里有任何选择吗？有什么好的方法可以达到这种视觉效果吗？

Answer 1

一个 jquery 解决方案，每组 4 个 .rack 元素被包装在一个 .row div 中，可以很容易地设置样式。

HTML

<div class="allRacks">
    <div class="rack smallRack"></div>
    <div class="rack mediumRack"></div>
    <div class="rack smallRack"></div>
    <div class="rack largeRack"></div>
    <div class="rack smallRack"></div>
    <div class="rack mediumRack"></div>
    <div class="rack largeRack"></div>
    <div class="rack smallRack"></div>
</div>

JS:

$(document).ready(function(){
    var $pArr = $('.rack');
    var pArrLen = $pArr.length;
    for (var i = 0;i < pArrLen;i+=4){
        $pArr.filter(':eq('+i+'),:eq('+(i+1)+'),:eq('+(i+2)+'),:eq('+(i+3)+')').wrapAll('<div class="row" />');
    };
});

查看工作示例:http://jsfiddle.net/vRsRJ/1/