CSSで数値操作が許可されていますか？

Question

たとえば、CSSではwidth: 50% + 10px;が有効ですか？

この問題を回避するにはどうすればよいですか？私は、複数の列を持つfloat要素に取り組んでいます。各列間の幅は10pxです。だから私は画面サイズを取得するために動的な幅の計算が必要です。

Answer 1

いいえ。 CSSで数学を使用する場合は、SASSまたはLESSを参照してください。

LESS（またはSASS）を使用していて、均等に配置された列が必要な場合は、Bootstrap responsiveのように聞こえます。

Answer 2

あなたはこの前の記事を参照してくださいcalc

selector{ 
    width: -moz-calc(50% + 10px); 
    width: -webkit-calc(50% + 10px); 
    width: calc(50% + 10px); 
} 

Answer 3

を試すことができます：それはCSSから直接ことはできませんIs it possible to do mathematics inside CSS?

を。しかし、例えば、LESSを使うことができます。 また、javascriptを使用して動的に行うこともできます。

しかし、これは画面を計算するためのものですので、どのようなデザインがどのようなものかを見てみましょう。これにはすでに多数のフレームワークがあります。私はここで他のものよりも優れているとは言いません。しかし、見てくださいhttp://designpin.co/5-responsive-web-design-frameworks/

あなたのニーズに合ったものを見てください。

Answer 4

それはあなたが本当に必要なもののように聞こえるが余裕です：

ない場合は、この問題を回避する方法？私は、複数の列を持つfloat要素に取り組んでいます。各列間の幅は10pxです。だから私は画面サイズを取得するために動的な幅の計算が必要です。

.colItem { float: left; margin-right: 10px; } 

隣同士に座って2列はすべて（> 100％、50％+ 50％+ 20ピクセルのマージンを）ルーンうとしてあなたの幅は、おそらく実際には、その場合には50％であってはなりません。実際には10ピクセル、1％などは必要ありません。

よりよい解決策は、おそらく、ボックスのサイズ変更プロパティでパディングを使用することです：

.colItem 
{ 
    float: left; 
    width: 50%; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
    padding-right: 10px; 
} 
.colItem.last 
{ 
    padding-right: 0px; 
}