ﾃｰﾌﾞﾙﾀｸﾞの代用をｽﾀｲﾙｼｰﾄで実現するときのﾃｸﾆｯｸを出来るだけたくさんのﾚﾊﾟｰﾄﾘｰで紹介してください｡
http://msugai.fc2web.com/web/CSS/table.html
CSS 概説 | ﾃｰﾌﾞﾙ
cssのdisplayﾌﾟﾛﾊﾟﾃｨを使用すれば､div等の任意の要素でもtableﾓﾄﾞｷが作れることになってます｡
･･･仕様上は｡
IEでﾏﾄﾓに対応していないのが残念ですが､ﾚﾊﾟｰﾄﾘｰのひとつに加えていただけると嬉しいです｡f(^^;｡
ありがとうございます｡
そうなんですがｰ｡しりませんでした｡
さっそくためしてみます｡
質問文にある例ですが､widthﾌﾟﾛﾊﾟﾃｨはｲﾝﾗｲﾝ要素には適用出来ないので､｢きちんと表示されない｣挙動が正しいのです｡
さて､代用例ですが｡
1. displayﾌﾟﾛﾊﾟﾃｨのtable関連の値を利用する(URI参照)
2. floatを使つた段組
3. position等を使つた段組
が挙げられるでせうか｡
取敢ず､2と3の例を下に記します｡
<h2>floatを使つた段組</h2>
<div>
<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>
</div>
<div style=”clear:both;”>
<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>
</div>
<hr style=”clear:both;”><!-- 段組解除する際は何らかの要素でclearﾌﾟﾛﾊﾟﾃｨを指定する必要あり -->
<h2>position等を使つた段組</h2>
<div style=”position:relative;”>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:0;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:5.5em;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:0;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:5.5em;”>div要素</div>
</div>
>質問文にある例ですが､widthﾌﾟﾛﾊﾟﾃｨはｲﾝﾗｲﾝ要素には適用出来ないので､｢きちんと表示されない｣挙動が正しいのです｡
そうでした！ありがとうございます｡
また､頂いたｺｰﾄﾞの方も勉強になりました｡
http://www.motchie.com/article/multicolumn.html
ｽﾀｲﾙｼｰﾄでﾏﾙﾁｶﾗﾑ･ﾃﾞｻﾞｲﾝを実現する方法
左上右上
右下右下
上はこちらの環境で表示された結果です｡枠線が入っていますけれども｡この表示結果に問題があるということでしょうか？
この方法で幅を決定していきたいということであれば､widthをpaddingに変更すれば問題ないと思われます｡
ﾏﾙﾁｶﾗﾑﾃﾞｻﾞｲﾝと呼ばれる､cssでtableﾃﾞｻﾞｲﾝを実現するということであるのならば･･･｡
sasadaさんが指摘された､cssでtableﾃﾞｻﾞｲﾝを実現する方法について記載されているﾍﾟｰｼﾞを3つ､実現の面で参考になりそうなﾍﾟｰｼﾞを1つ､それぞれ出しておきます｡
http://www.fromdfj.net/html/column.html
fromdfj.net
http://www6.plala.or.jp/go_west/nextcss/
CSS Dencitie
ありがとうございます｡
