Question

如果屏幕宽度大于960px;，我需要以4x4的格式显示16 div 如果屏幕宽度为746px且宽度为2x6且480px

，则显示3x4 div 如果屏幕宽度为32px，则

和1x16;

我需要编写一个jquery，让我们说如果屏幕大小大于960px那么我需要从最后4个div中删除边框。

我不确定如何让它在小提琴http://jsfiddle.net/krGQc/42/

上成为榜样

<div class="tdiv">1</div>
<div class="tdiv">2</div>
<div class="tdiv">3</div>
<div class="tdiv">4</div>
<div class="tdiv">5</div>
<div class="tdiv">6</div>
<div class="tdiv">7</div>
<div class="tdiv">8</div>
<div class="tdiv">9</div>
<div class="tdiv">10</div>

Answer 1

在css中使用 n-last-child ：

.tdiv:nth-last-child(-n+4)  {
    border:none;
}

Fiddle

Answer 2

在CSS样式表中使用媒体查询：

.tdiv {
    /* Styling for width >= 960px */
}

@media all and (max-width: 746px) {

    .tdiv {
        /* Styling for width <= 746px */
    }

}

@media all and (max-width: 480px) {

    .tdiv {
        /* Styling for width <= 480px */
    }

}

您可以使用伪类选择器:nth-child()和:nth-last-child()隐藏最后n个元素或从中删除边框。

Answer 3

您可以使用带有负数索引的gt()从最后一个元素向后计数。

if (window.screen.width > 960) { // you asked for "screen"
    $('.tdiv:gt(-5)').css('border','none');
}

FIDDLE

Answer 4

使用CSS媒体查询

@media (min-width: 32px) and (max-width: 479px) { /* 1x16 */
    .tdiv {
        clear:left;
    }
}
@media (min-width: 480px) and (max-width: 745px) { /* 2x6 */
    .tdiv:nth-child(2n+1) {
        clear:left;
    }
    .tdiv:nth-child(n+13) {
        display:none;
    }
}
@media (min-width: 746px) and (max-width: 959px) { /* 3x4 */
    .tdiv:nth-child(3n+1) {
        clear:left;
    }
    .tdiv:nth-child(n+13) {
        display:none;
    }
}
@media (min-width: 960px) { /* 4x4 */
    .tdiv:nth-child(4n+1) {
        clear:left;
    }
}

DEMO

如何使用jquery更改n个div元素的css

4 个答案: