2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓
|
1 2 3 4 5 6 7 8 9 10 11 12 |
width:calc(100% / 3 - 10px); /* -------- 100%を３で割って10px引くという意味。 +（たす） -（ひく） *（かける）も使える。 演算子の前後は、必ず半角あける。 ---------- */ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* -------- borderの幅、paddingの幅もwidthのうちに入れてくれる。 ---------- */ |
僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html
ピンバック: html5で作るWPオリジナルテーマ：2 | パソコン倶楽部りんご