问题描述
我想做这样的事情,但是没有html的tr th属性,因为我的表仅使用ul和li属性
+-----------------------+
| one joint column |
+-----------------------+
| 5 | 6 | joint |
+-----------------------+
| 9 | 10 | 11 | 12 |
+-----------------------+
预先感谢
更新
这是我的代码段:
<li class="cell"> 1min
<div ng-repeat="load1min in cpu.data1mnList | orderBy:'idEquipment'">
<span class="bolded_span">
{{(load1min.value).toFixed(3)}}
</span>
</div>
</li>
<li class="cell"> 5min
<div ng-repeat="load5min in cpu.data5mnList | orderBy:'idEquipment'">
<span class="bolded_span">
{{(load5min.value).toFixed(3)}}
</span>
</div>
</li>
<li class="cell"> 15min
<div ng-repeat="load15min in cpu.data15mnList | orderBy:'idEquipment'">
<span class="bolded_span">
{{(load15min.value).toFixed(3)}}
</span>
</div>
</li>
解决方法
使用CSS flex
.flex {
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.flex > * { flex-basis: 100%; }
.span-1 { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }
li { background: gold; }
<ul class="flex">
<li>one joint column</li>
<li class="span-1">5</li>
<li class="span-1">6</li>
<li class="span-2">joint</li>
<li class="span-1">9</li>
<li class="span-1">10</li>
<li class="span-1">11</li>
<li class="span-1">12</li>
</ul>
另一种方式:
.flex {
padding: 0;
list-style: none;
display: flex;
flex-flow: row wrap;
}
.flex > * { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }
.span-4 { flex-basis: 100%; }
.flex li { background: gold;}
<ul class="flex">
<li class="span-4">one joint column</li>
<li>5</li>
<li>6</li>
<li class="span-2">joint</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>