CSS高さ揃え

display:box;
display:-webkit-box;
display:-moz-box;
便利です。
ulとliで利用しました。
(ulにdisplay:box;)。

が、子要素が多いと親要素のwidthをぶっちぎって横並びしますね。
子要素に
display:inline-block;
vertical-align:top;
でやや安定。
親要素のwidthに合わせてリキッドデザインのように複数行に変わる。
その際に発生する、改行=半角スペースをケアしてあげれば、ほぼ望み通りの形に。

<li>...</li
><li>...</li
><li>...</li>

こんな感じ。
まあ、IE6が消えてもまだダメなIEが絶滅してないので、当分スマホ用の書き方だけど。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする