227

div純粋なCSSで50pxを100％未満にすることは可能ですか？<div>を100％未満の50pxにしたい。JavaScriptは必要ありません。

4

6 に答える 6

291

はい、できます。IEを使用せずに、を使用expression()してCSS3でそれを行うことができますcalc()。

div {
    width: 100%;
    width: -webkit-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
    width: calc(100% - 50px);
}

デモ： http： //jsfiddle.net/thirtydot/Nw3yd/66/

これはあなたの人生をとても楽にしてくれます。現在、Firefox、Google Chrome（WebKit）、IE9の3つのメインブラウザでサポートされています：http：//caniuse.com/calc

MDN：https ://developer.mozilla.org/en/CSS/-moz-calc

于 2012-06-19T03:18:53.173 に答える
159

DIVは自動的にその親の幅を取ります。したがって、を定義する必要はありませんwidth。通常は、次のように記述します。

div{
    margin-right:50px;
}

このフィドルを確認してください

于 2012-06-19T04:37:27.853 に答える
37

もう1つの方法は、絶対測位です。

div {
    position: absolute;
    left: 0;
    right: 50px;
}

フィドル

ただし、Sandeepのソリューションは、通常使用する必要があるソリューションです。使いすぎは避けてくださいfloat。これにより、要素がコンテナを自然に満たすのを防ぎます。

于 2012-06-19T05:10:09.357 に答える
7

私のソリューションは、の有無にかかわらず機能しfloat: leftます。

HTML： 

<div></div>

css：

div {
    height: 20px;
    background: black;
    float: left;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    background-clip: content-box; 
}​

デモ

互換性：
Firefox 3.6、Safari 5、Chrome 6、Opera 10、IE 9

于 2012-06-19T14:37:50.707 に答える
4

jsFiddle

ディスプレイblockとを使用しますmargin。定義された/とdisplay:block組み合わされていない場合、その親を埋めようとします。heightwidth

header {
    width:100%;
    background:#d0d0d0;
    height:100%;
}
h1 {
    display:block;
    border:#000 solid 1px;
    margin:0 50px 0 0;
    height:100px;
}
<header>
    <h1></h1>
</header>
于 2013-04-18T02:58:03.713 に答える
-4

はい、作ることでできます

#custom_div{
 width:100%;
 margin-right:50px;
 }

ありがとう

于 2012-06-19T09:15:00.423 に答える