如何限制內聯顯示的子div的數量？

Question

有沒有辦法使用CSS3來限制一行（或內嵌）中顯示的子div的數量？

<div class="parent"> 

    <div class="child"> 
    <img> 
    <p>Text explaining img</p> 
    </div> 

    <div class="child"> 
    <img> 
    <p>Text explaining another img</p> 
    </div> 

    <!-- If I only want two per line, let's push the next two down --> 

    <div class="child"> 
    <img> 
    <p>Text explaining another img</p> 
    </div> 

    <div class="child"> 
    <img> 
    <p>Text explaining another img</p> 
    </div> 

</div> 

我已經考慮只是應用的寬度和利潤，但我也想在一排的最後一個孩子有保證金右：0;

任何想法？

Answer 1

如果你知道你的元素的大小，你可以這樣來做：

.parent { 
    border: 2px solid #c00; 
    padding: 4px; 
    display: inline-block; 
} 
.child { 
    border: 2px solid #0c0; 
    padding: 4px; 
    display: block; 
    width: 64px; 
    height: 64px; 
    margin: 0 76px 0 0; 
} 
.child:nth-child(2n) { 
    margin: -76px 0 0 76px; 
} 

http://jsfiddle.net/b4f5c/

Answer 2

你應該使用jquery或javascript顯示未來2名兒童

CSS3具有nth-child property但你只能用該屬性顯示特定的兒童。

這是與jQuery解決

var dispdivs=0; 
    function minview() 
    $(".child").hide();// hide all child elements 
    dispdivs+=2; 
     for(var i=0;i<dispdivs;i++) //this is to display extra 2 divs 
     { 
     $(".child:eq("+i+")").show(); 
     } 
    } 

當過要顯示所有元素使用

$(".child").show();