html - 我想根据记录及其内容在 html 中制作一个动态的 2 列表

Question

我有一系列内容。我想做一个动态表。也可以使用 DIV。我想循环我的数组，我希望数据像这样显示。

它应该自动调整表格的数量和高度，因为我必须在 DOMPDF 中使用它。

CSS column-count 的属性不起作用，所以我想要一个解决方法，我会奖励 50 赏金给帮助我解决这个问题的人。

Answer 1

这是一个基本的解决方案：HTML

<div class='wrapper cf'>

  <div class='col-left'>
    <div class='one'></div>
    <div class='two'></div>
    <div class='foo'></div>
    <div class='type'></div>
  </div>
  <div class='col-right'>
    <div class='oneone'></div>
    <div class='twotwo'></div>
    <div class='foofoo'></div>
    <div class='typetype'></div>
  </div>

</div>

和 CSS：

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}
.wrapper{
  width:400px;
  height:auto;
  min-height:100px;
  border:1px solid #000;
 box-sizing: border-box;
}
.col-left,.col-right{
  width:50%;
  float:left;
  min-height:100px;
}
.col-right{float:right;}
.one{border:1px solid #000;width:100%;height:20px;}
.two{border:1px solid #000;width:100%;height:25px;}
.foo{border:1px solid #000;width:100%;height:120px;}
.type{border:1px solid #000;width:100%;height:80px;}

.oneone{border:1px solid #000;width:100%;height:40px;}
.twotwo{border:1px solid #000;width:100%;height:35px;}
.foofoo{border:1px solid #000;width:100%;height:120px;}
.typetype{border:1px solid #000;width:100%;height:110px;}

.col-left div:last-child,.col-right div:last-child{border-bottom:none;}

例如，我只给出固定高度。

cf 课程由 Gallagher site参加。

要以动态方式实现此结果，您可以使用例如 foreach 函数来循环数组。