html - 如何限制内联显示的子 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>

我考虑过只应用宽度和边距，但我也希望一行中的最后一个孩子有 margin-right: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 属性，但您只能使用此属性显示特定子项。

这是 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();