CSSって素晴らしい!

テーブルのカラムの内容の出力で、一つのセルの中に二つの文字列を出力しようと思った。
さらに、片方は左詰で可変長、片方は右詰の固定長の文字列を出力したかった。
HTMLのalignプロパティだけでは不可能だろうと思った。CSSなら何とかなるかな?という感じで調べて実験してみた。できた。
まず、調査。正しい解釈ではインライン要素(span)ではwidthを指定できないことがわかった。まず、左詰にしたい文字列と右詰にしたい文字列に分けてそれぞれをdiv要素で囲って出力する。
CSSを書く。左詰の分から出力して、
float: left
で出力。右詰の文字列が固定長なのでこちらにwidthを指定し、左詰の方は
margin-left: 0;
margin-right: auto;
で出力してみた。
いい感じだ。固定長の文字列のdivに対するwidthを調整して思ったとおりにレイアウトできた。できるものなんだな。正しいのかはわからないが。

コメント