Question

我想要以表格形式显示两种产品。

<div id="products">
  <div id="product_one">
    <div>
      id one
    </div>
    <div>
      name one
    </div>
  </div>

  <div id="product_two">
    <div>
      id two
    </div>
    <div>
      name two
    </div>
  </div>
</div>

我希望它们看起来像这样：

| id one     | id two     |
| name one   | name two   |

更具体地说，我希望行保持一致，就像使用表格一样。

| id one is   | id two    |
| longer this |           |
| time        |           |
| name one    | name two  |

我希望有一种方法可以使用display：table-column，但我找不到任何体面的文档。我是否注定要重新格式化HTML，或者有没有办法用好的'CSS'来做到这一点？

- 编辑 -

从评论中可以看出，没有额外的东西，这是不可能的。是否有一个简短的JavaScript解决方案可以解决问题？

Answer 1

http://jsfiddle.net/CYfED/1/希望这有助于实现目标。

Answer 2

试试这个http://jsfiddle.net/tKqvh/

Answer 3

使用重复的id是一个诅咒。

这将解决您的问题：

#products { display: table-row; }

#product_one {
    display: table-cell;  
    border: 1px dashed #000000;
}

Demo here

使用css display table-column显示柱状数据

3 个答案: