dl dt ddを使った3列横並びリスト
テーブルで作っていた3列のリストをdlを使って作りかえたいなと思って作ってみました。
おおまかなhtmlとcssは覚書に。
覚書
基本はA列がdt
B列C列がdd。
dt,ddに高さを指定。
B-1のマージンをdtの幅分左に、高さ分をマイナスで指定する。
B-2は左のみ指定。
C-1のマージンをA+B列分左に、高さをB列のDD全ての高さを足した分マイナスで指定。
C-2は左のみ指定。
問題はC-1で指定する高さ分のマイナスマージン。
B列に項目がいくつあるかによって変わってしまうので、B列のDDが1つの時、2つの時と初めにクラス分けして設定する。
マイナス指定するマージンは前列の基本全ての高さを合わせたものになります。
ボーダー、マージン、パディングetc
<結論>
複雑になってくるとC-1のクラス分けなどめんどくさいかもしれません。
javascriptで何番目と判断させて自動的にクラス分けとか出来るのかもしれないけれど..。
テーブルで作ってもいいのですが、rowspanや、やたら多くなるタグで見にくくなるので、これも有りかと思います。