ブロック要素を使用してテーブルを再作成するときの幅の設定

Question

ブロック要素（この場合は順序なしリスト）を使用してテーブルを再作成しようとしています。これらのアイテムの1つが親要素を埋めるようにします。これはテーブルではとても簡単でした。私はテーブルを100％に設定し、親を埋めるセルの幅を指定しません。ブロック要素でこれをどうすればできますか？テーブルと

それは簡単です：

<table width="100%" border="1"> 
    <tr> 
     <td width="200">200px</td> 
     <td>nice wide column which fills the page</td> 
     <td width="100">100px</td> 
    </tr> 
</table> 

しかし、リスト項目

<style> 
    ul { 
     list-style-type: none; 
     padding-left: 0px; 
    } 
    li { 
     float: left; 
    } 
    .col1 { width: 200px; } 
    .col2 { } /* width: 100% doesn't work */ 
    .col3 { width: 100px; } 
</style> 

<ul> 
    <li class="col1">200px</li> 
    <li class="col2">tight column wrapping around this text</li> 
    <li class="col3">100px</li> 
</ul> 

どのように私はセンター "の欄には、" ページを埋めることを確認することができますを使用していますか？

Answer 1

これはいかがですか？それが動作

ul { 
    display: inline-table; 
} 
li { 
    display: table-cell; 
} 
.col1 { 
    width: 200px; 
} 
.col2 { 
} 
.col3 { 
    width: 100px; 
}​ 

証明：http://jsfiddle.net/zLvz5/

Answer 2

通常はjavascriptを使用するか、幅を計算します。 col2の 利用スタイル（中央の列）：

.col2 
{ 
    margin:0 100px 0 200px; 
    float:none; 
} 
also, use add this style to col3: 
.col3 
{ 
    float:right; 
} 

最後の一つの変更：その中央のカラムが最後のように追加されるように、李の受注を変更し ：

<li class="col1">200px</li> 
<li class="col3">100px</li> 
<li class="col2">tight column wrapping around this text</li> 

しかし、CSSで、ここで悪いソリューションです

また、これは悪い解決策（imo）です。