tableの機能を他のﾀｸﾞでcssで表現する方法を教えてください｡ ※table-cellは無しでお願いします｡単純な横並びではなく､左右で縦幅が同期するようにお願いします｡ …

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

tableの機能を他のﾀｸﾞでcssで表現する方法を教えてください｡
※table-cellは無しでお願いします｡

単純な横並びではなく､左右で縦幅が同期するようにお願いします｡

●質問者: makocan
●ｶﾃｺﾞﾘ:ｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽1 ● POGPI
●0ﾎﾟｲﾝﾄ

div､ol､liでできると思います｡olはfloat:bottom､liはfloat:leftですね｡

makocanさんのｺﾒﾝﾄ
それは単純に横並びかと思います｡今回の質問は､｢単純な横並びではなく､左右で縦幅が同期するようにお願いします｣が重要になりますが､それも該当記述のみで対応可能なのでしょうか？

POGPIさんのｺﾒﾝﾄ
heightを指定しなければ､liﾀｸﾞの縦幅が一番大きいのに合わせて､揃うと思います｡

makocanさんのｺﾒﾝﾄ
これは､floatで左右に並べ､左側をbr などで2行にしたとしたら､右側も自動的に2行文の広さになるということでしょうか？ talbe-cellならば可能ですが､少なくとも､私の環境では､floatだけでは実現できませんでしたので｡

POGPIさんのｺﾒﾝﾄ
liﾀｸﾞの広さ(height)を同じにするのは多分無理です｡

makocanさんのｺﾒﾝﾄ
うｰん｡やっぱり､CSSでは無理ですかね｡やはり､JSで処理するしかなさそうですかね｡

▽2 ● 河津武志
●200ﾎﾟｲﾝﾄ

display:box;

makocanさんのｺﾒﾝﾄ
うｰん｡出来れば､昔のﾌﾞﾗｳｻﾞも対応できる形式が｡｡｡

河津武志さんのｺﾒﾝﾄ
要素2重でこんな感じで内側の要素 { padding-bottom: 10000px; margin-bottom: -10000px; float: left; width: 200px; } 外側の要素 { overflow: hidden; }

makocanさんのｺﾒﾝﾄ
ありがとうございます！これ､どこかでも見たのですが､確かに自動で縦幅伸びますね｡どこかに欠点があってやめた気がしましたが試してみます｡