【css】幅の指定に四則演算を使う

WEB

2021.06.17 2016.03.16

レスポンシブで横並びにするときとか、
タグ増やしまくって頑張らなきゃいけなかったり、
色々難があったり、
そんないらいらを解消できる。

とりあえずサンプル

<div>
<div></div>
<div></div>
</div>

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とかを使って余白を調整。