没有＆＃34;显示的CSS多行表：table-row＆＃34;

Question

我需要在不使用display: table-row的情况下创建多行表。

因为它是从模板格式化的，所以无法插入＆＃34; row＆＃34;代码介于＆＃34;某些＆＃34;项目。所有项目都是一样的。

我需要的是：3列3行，所有列的高度相同。

如果我删除float: left，则所有项目都会显示在一行中。有了它，它们都有不同的高度。

HTML

<ul>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd<br>ddd</p>
  </li>
  <li>
    <p>ddd</p>
  </li>
  <li>
    <p>ddd<br>ddd</p>
  </li>
</ul>

CSS

ul {
  display: table;
  width: 100%;
  height: 100%;
}

li {
  display: table-cell;
  height: 100%;
  width: 33%;
  float: left;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: 100%;
}

http://jsfiddle.net/7ca4deko/

Answer 1

尝试使用handlers

http://jsfiddle.net/dnomLjue/1/

display: flex

ul {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

li {
  width: 33%;
  list-style-type: none;
}

p {
  background: #eeeeee;
  margin: 2px;
  height: calc( 100% - 2px);
}