1

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，那么整个内容都有一个渐变。这不会产生不同行的错觉。

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

但是，因为我的元素是内联块，所以 rackWrapper 不会增长以适应行。这会导致我的渐变格式不正确。

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

4

1 回答 1

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/

于 2013-08-22T00:23:00.457 回答