19

とにかくcss値を数式として書くことができますか？例：

div{
    height: 50% + 30px;
    width: 40em - 5px;
   }

もしあれば、それは完璧でしょう。
PS：JSやJQueryではやりたくないです。

4

4 に答える 4

28

これはcss3calc （）で実現できます。このように書いてください：

div{
    width: 40%;
    width: -webkit-calc(40% - 5px);
    width: -moz-calc(40% - 5px);
    width: calc(40% - 5px);
    height:50%;
    height: -webkit-calc(50% + 50px);
    height: -moz-calc(50% + 50px);
    height: calc(50% + 50px);
    background: green;
    color: white;
    position:absolute;
}

これをチェックしてくださいhttp://jsfiddle.net/3QUw6/

詳細については、このディスカッションを確認してください。CSS3でdiv 50pxを100％未満にすることは可能ですか？

于 2012-08-07T08:16:58.123 に答える
3

CSSではこれを行うことはできませんが、LESS、SASS、または私のお気に入りのStylusなどのCSSプリプロセッサを使用することはできます（さらに多くのこともできます） 。最終的な出力は単純な古いCSSですが、最初にコンパイルする必要があります。

于 2012-08-07T08:02:29.900 に答える
2

との両方paddingをmargin使用して、オブジェクトの寸法を追加できます。ボックスモデルをお読みになることをお勧めします。

HTML： 

<div id="container">
    <div class="wrapper">
        <div>...</div>
    </div>
</div>

CSS： 

.wrapper { 
    width: 40em;
    height: 50%;
    padding: 15px 0; /* Top and bottom padding of 15px */ }

/* Block-level element will take up 100% of the 
  container width, minus {margin_right} + {marign_left} */
.wrapper > div { margin: 0 0 0 5px; }
于 2012-08-07T08:04:21.020 に答える
2

CSSのcalc（）関数を見てください。うまくいけば、これに対するサポートはブラウザで増えるでしょう。

于 2012-08-07T08:14:50.043 に答える