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

2016/3/16 未分類

Reading Time: 1 minute

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

とりあえずサンプル

<div>
	<div></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;/*中央の余白*/
	}

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