CSS 多行 table 无 "display: table-row"

Question

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

因为它是从模板格式化的，不可能在"some"项之间插入"row"代码。所有项目都一样。

我需要的是：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

尝试使用 display: flex

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

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

<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 多行 table 无 "display: table-row"

CSS multi-row table without "display: table-row"

html

css

css-tables