CSS如何在显示表格单元格的n个分区后自动中断/进入

Question

例如，我在display: table-cell中有6个div。

Fiddle

HTML

<div class="widget">
  <div class="subWidget">
    A
  </div>

  <div class="subWidget">
    B
  </div>

  <div class="subWidget">
    C
  </div>

  <div class="subWidget">
    D
  </div>

  <div class="subWidget">
    E
  </div>

  <div class="subWidget">
    F
  </div>
</div>

CSS

.widget
{
  display: table;
  width: 100%;
  border-spacing: 20px;
}

.widget .subWidget
{
  display: table-cell;
  background: #c0c0c0;
  border-right: 1px solid red;
  text-align: center;
}

现在我想，每5个div它将被中断/进入div 6-10

请看下面的内容

A | B | C | D | E
F

Answer 1

为了简单起见，您需要在每五列之后添加一行。对于小部件$(".widget :nth-child(5n)")的每个第5个div (它是一个子项)，创建一个新的div元素，其样式显示为table-row。在每五个元素之后添加它！

$(".widget :nth-child(5n)").each(function(){
        var $newRow=$("<div>").css("display","table-row");
            $(this).after($newRow);
});

编辑:添加新行的更好解决方案！

您可以创建一个jquery函数，它每隔一行包装一次第5个元素。

var $newRow=$("<div>").css("display","table-row");
$.fn.wrapEvery = function( cLen, wrapperEl ) {
    while ( this.length ) {
        $( this.splice(0, cLen) ).wrapAll( wrapperEl );
    }
};
$('.subWidget').wrapEvery(5, $newRow);

Reference

这就是小提琴！

​

var $newRow=$("<div>").css("display","table-row");

$.fn.wrapEvery = function( cLen, wrapperEl ) {
    while ( this.length ) {
        $( this.splice(0, cLen) ).wrapAll( wrapperEl );
    }
};

$('.subWidget').wrapEvery(5, $newRow);

.widget
{
  display: table;
  //display:inline-block;
  width: 100%;
  border-spacing: 20px;
}

.widget .subWidget
{
  display: table-cell;
  background: #c0c0c0;
  border-right: 1px solid red;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget">

  <div class="subWidget">
    A
  </div>
  
  <div class="subWidget">
    B
  </div>
  
  <div class="subWidget">
    C
  </div>
  
  <div class="subWidget">
    D
  </div>
  
  <div class="subWidget">
    E
  </div>
  
  <div class="subWidget">
    F
  </div>
  
</div>

​

Answer 2

我不能百分之百确定这是否可以用"display: table-cell“来实现--但是你可以用Flexbox很容易的实现：

​

.widget
{
  width: 100%;
  border-spacing: 20px;
}

.widget .flexWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.widget .subWidget
{
  background: #c0c0c0;
  border-right: 1px solid red;
  text-align: center;
  width: calc(20% - 1px);
}

<div class="widget">
  <div class="flexWrap">
    <div class="subWidget">
      A
    </div>

    <div class="subWidget">
      B
    </div>

    <div class="subWidget">
      C
    </div>

    <div class="subWidget">
      D
    </div>

    <div class="subWidget">
      E
    </div>

    <div class="subWidget">
      F
    </div>
  </div>
</div>

​

我添加了一个“Flex”，这样你就可以控制你的FlexWrap内容了。每个子项目将占用其flexbox的20%-1px ( -1px是为了适应您的1px边框)。

使用此设置，您可以将5个项目放在您的上，并且每第6个项目在新的行上开始