レスポンシブで横並びにするときとか、
タグ増やしまくって頑張らなきゃいけなかったり、
色々難があったり、
そんないらいらを解消できる。
とりあえずサンプル
1 2 3 4 | <div> <div></div> <div></div> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | div{ /*親要素*/ width:100%; padding:0 20px;/* 左右の余白 */ display:table; box-sizing:border-box; } div div{ /*子要素*/ width:-webkit-calc(50% - 20px) ; width:calc(50% - 20px) ; display:table-cell; box-sizing:border-box; } div div:nth-child(1){ /*子要素*/ padding-right:40px;/*中央の余白*/ } |
まあ見たままだけど。
%とpxでの計算ができるのでとても楽。
nth-childとかを使って余白を調整。
コメント