css - CSSで算術演算を実行するには?

Question

CSSで算術演算を実現する方法を知りたいです。

例: 幅 50% の 2 つの div を並べて配置し、これらの div に境界線を付けたいとします。このようにルールを書きたいと思います。

#container {
    width: 50% - 1px; // I know this does not work.
}

ブラウザーが CSS でそのような算術演算をサポートしていないのはなぜですか?

そして、どうすればこれを機能させることができますか?

score 10 · Accepted Answer

で使用box-sizing: border-box;して<div>、ボーダーを幅計算の一部にします。のデフォルト値box-sizingはで、属性content-boxにパディングやボーダーは含まれません。width

#container {
  border: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
}

Paul Irish は、border-box の使用についてコメントし、使用をcalc()提案しています。

score 1 · Accepted Answer

CSSプリコンパイラで可能です。LESSansSassはとても人気があります。上記の例と同じように記述できます。

デザイナーの方はLESSの方が扱いやすいです。プログラマーや Ruby (on Rails) 開発者にとっては、Sass の方が良い選択かもしれません。

3 に答える 3