そんなときは以下のように指定することができます。
width : calc(100% - 10px) ;
こう指定するとこで100％の幅から固定で10px差し引いた横幅になります。
その機能を応用したサンプルが以下です。
100%の幅から40px引いたwidthのサンプル
これは100%から左右20pxを引いて、margin左右に20pxをセットしてます。
.demo_wrap{
background-color:#F00;
margin:20px 0;
text-align:center;
}
.demo_wrap .demo_item{
background-color:#FF0;
width : -webkit-calc(100% - 20px * 2) ;
width : calc(100% - 20px * 2) ;
margin:0 20px;
height:20px;
}
<div class="demo_wrap clearfix">
<div class="demo_item">100%の幅から40px引いたwidthのサンプル</div>
</div>
次のサンプルは100%を３で割った時のサンプルです。
100%の幅を３で割ったときのサンプル
100%の幅を３で割ったときのサンプル
100%の幅を３で割ったときのサンプル
33.333....%なので固定値で書くと微妙に余ってしまいますが、それを防げます。
.demo_wrap .demo_item2{
background-color:#00F;color:#FFF;
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;
float:left;
box-sizing:border-box;
border:solid 1px #222;
}
<div class="demo_wrap clearfix">
<div class="demo_item2">100%の幅を３で割ったときのサンプル</div>
<div class="demo_item2">100%の幅を３で割ったときのサンプル</div>
<div class="demo_item2">100%の幅を３で割ったときのサンプル</div>
</div>
最後に上記二つを組み合わせたレイアウト例です。
←20px余白
←3%余白3%→
20px余白→
左右のマージンは固定で撮りたい、並んだ要素の隙間はパーセントでとりたい、そんなわがままレイアウトのサンプルです。
.demo_wrap .demo_item3{
background-color:#00F; color:#FFF;
width : -webkit-calc(100% / 3) ;
width : calc(94% / 3) ;
margin-right:3%;
float:left;
}
.demo_wrap .demo_item3:last-child{
margin-right:0;
}
<div class="demo_wrap clearfix">
<div class="demo_item">
<div class="demo_item3">←20px余白</div>
<div class="demo_item3">←3%余白3%→</div>
<div class="demo_item3">20px余白→</div>
</div>
</div>
calcの指定はIE8以下とAndroid4.3以下は無効になるのでwidthをあらかじめセットする必要があります。
