Hatena::ブログ(Diary)

プログラミング雑記 このページをアンテナに追加 Twitter

2014-11-07 css display:table要素でスペースを確保する方法

css display:table要素でスペースを確保する方法*[WEBプログラミング]

16:59 | css display:table要素でスペースを確保する方法*[WEBプログラミング]を含むブックマーク

css&htmlで少しだけハマったのでメモ。

cssでdivタグにdisplay:tableとして、子の要素にdisplay:table-cellとすれば要素を、他の子要素の高さに合わせて伸縮させることが出来ます。

しかし!! display:table-cellだとmarginが効かない!!!

僕の思いついた解決策

スペースを必要とする要素間にdivタグを挟んで、width: ?%とすればいいんじゃない?

div style="display:table"
  div style="display:table-cell; width:45%"
  /div
  div style="display:table-cell; width:10%"
  /div
  div style="display:table-cell; width:45%"
  /div
/div

こんな感じ。

これはつまり

これが

■■

こうなるわけですね。

■ ■

要素が3つなら

div style="display:table"
  div style="display:table-cell; width:30%"
  /div
  div style="display:table-cell; width:5%"
  /div
  div style="display:table-cell; width:30%"
  /div
  div style="display:table-cell; width:5%"
  /div
  div style="display:table-cell; width:30%"
  /div
/div

これもつまり

これが

■■■

こうなるわけですね。

■ ■ ■

トラックバック - http://d.hatena.ne.jp/Korsakov/20141107