Question

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;
}

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

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

因此，它有点棘手。如果我将渐变应用于rackRowWrapper，则整个内容有一个渐变。这并没有给出不同行的错觉。

所以，我想我会将每个矩形包裹在一个包裹的rackWrapper中，并在此级别设置渐变。然后，只要一个rackWrapper包装到下一个级别......就会出现视觉上不同的新行。你可以在jsfiddle中看到它。

但是，由于我的元素是内联块，因此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/

使用换行父级将所有div高度设置为最高行

1 个答案: