css表示の列データを表示する表列

Question

表形式で表示する2つの製品があります。

<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を使ってこれを行う方法があるのでしょうか？コメントから

--edit--

これは余分なものなしには不可能であるように、それはそうです。問題を解決する短いjavascriptソリューションはありますか？

Answer 1

http://jsfiddle.net/CYfED/1/これはあなたの目標を達成するのに役立ちます。

Answer 2

id Sを複製使用して、この1 http://jsfiddle.net/tKqvh/

Answer 3

を試してみては呪いです。

これはあなたの問題を解決します：

#products { display: table-row; } 

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

Demo here