第三列フロート

Question

なしCSS3のマークアップ私が知りたい、私は使用まで、このマークを行うことができますちょうどdisplay: table; and display: table-cellの列の：

例えば1と3列幅が15％ですスクリーンと最後のものは70％です。

私はこのようにそれを実行しようとした場合： ページ：

#content #left-column 
{ 
    display: table-cell; 
    width: 15%; 
} 

#content #mainContent 
{ 
    display: table-cell; 
    padding-right: 22px; 
    width: 70%; 
} 

#content #right-column 
{ 
    display: table-cell; /* width: 300px;*/ 
    width: 15%; 
} 

私は、 `こののようなマークアップを取得します。

正しいマークアップを作成するにはどうすればよいですか？

-------編集------------------------------- このコードを追加する必要があります私の問題を解決する。

コンテンツ

{ 表示：テーブルと 幅：100％; }

Answer 1

あなたのコードが動作するようです。私はちょうどdisplay: table;で親要素を追加しました。それは問題ありません。

#content 
{ 
    display: table; 
    width: 100%; 
} 

#content div 
{ 
    border: 1px dashed #000; 
} 


#content #left-column 
{ 
    display: table-cell; 
    width: 15%; 
} 

#content #mainContent 
{ 
    display: table-cell; 
    padding-right: 22px; 
    width: 70%; 
} 

#content #right-column 
{ 
    display: table-cell; /* width: 300px;*/ 
    width: 15%; 
} 

マークアップエラーが発生している可能性があります。このようなものを使用しましたか？

<div id="content"> 
    <div id="left-column"> 
     Left column 
    </div> 
    <div id="mainContent"> 
     Main Content 
    </div> 
    <div id="right-column"> 
     Right column 
    </div> 

</div> 

http://jsfiddle.net/2dMfZ/1/