PC:3要素で一番右だけ可変 スマホ：3番目を改行して表示のHTMLとCSS

Question

下図のようなレイアウト構造を作ろうと考えていますが、タグの構造、CSSの構造を考えていますが、頭の訓練として色々な方法を考えていますが、よい方法が見当たりません。2要素であれば、dt,ddでmargin-leftを作ればいいのですが、3カラムで複数行の場合、どう対応すればよいのか宜しくお願いします。

どうすればよいでしょうか。まずはタグの構造からどんなタグを使っていけばよいのか、コードでなくてもいいのでアドバイスをお願いします。

悩んだこと。
・dtddでdtを固定し、その中に日付とカテゴリを入れようと思ったが、dtの中にインライン要素しかいれられない。
・dtdd、ddの中にさらにdldtddな構造にしようと考えたが、スマホの場合、の改行がうまくいかない。
・liタグでは、複数行対応ができない？

Comments

[kei344]

ご自身で試されたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

[退会済みユーザー]

http://getbootstrap.com/css/#grid-options あたりをみれば 参考にはなるとおもいますが

[yajin]

>kei344さん
それをしようと思ったのですがdlタグやulタグ色々と考えられるので、構造からまずはアドバイスをと思いました。

＞unknown00012さん
グリッドシステムの利用でなく、固定にしたい部分が存在しています。

[退会済みユーザー]

グリッドシステムがそのまま使えといってません。
技術的参考になるのですが。

[gin]

「dtの中にインライン要素がいれられない」理由は何ですか？？

[yajin]

あ、失礼しました。インライン要素しかいれられないの間違いです。申し訳ございません。

Answer 1

dtの中のインライン要素にそれぞれdisplay: inline-block;とwidth: 100px;をあててあげればいいと思います。

Comments

[yajin]

なるほど。確かにその方法だとできますね。
あとはメディアクエリ等で切り分けていけばいいわけですね。
ありがとうございました。