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

如何限制内联显示的子div数量？

2 个答案: