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

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

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

僕の思いついた解決策

スペースを必要とする要素間に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

これもつまり

これが
■■■
こうなるわけですね。
■ ■ ■