0

左から12px余白のあるページを作ろうとしています。12pxの背景グレーを設定したい(これは関係ありません)。

左に 12px の左マージンを設定した後、他のすべての画面サイズをコンテナーにどのように指定できるかを指定します。

jsfiddle http://jsfiddle.net/7vzSQ/を参照してください。

私が欲しいのは：将来、ページに背景を与え、12pxの左が白い余白である場合、.containerがすべての画面サイズを取得できるようにするためのトリックを誰かが知っているとします（margin-leftで設定した12pxの余白を除く）

<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                test
            </div>
        </hgroup>
    </header>
    <div class="content">
        <div class="logo">

        </div>
    </div>
    <footer>

    </footer>
</div>

誰かチェックhttp://jsfiddle.net/7vzSQ/7/embedded/result/背景を 3 つ更新しましたが、ページに表示されない理由がわかりません。

これを行う主な目的は、すべての幅 (100% -12px) を .container に与えることです。私が100％を与えた場合、それはうまくいきません。css3 の calc 機能を試してみましたがうまくいきませんでした。calc(100%+ 12px) は機能しましたが、 calc(100% - 12px) は機能しませんでした (マイナス記号付き)。

誰かがそれを機能させるために推測していますか。

4

3 に答える 3

2

超クールになりたい場合は、calcを使用します。

#container{
  margin-left:12px;
  width: 100%;              /* fallback for non-supporters, produces scrollbar */
  width:    -moz-calc(100% -12px); 
  width: -webkit-calc(100% -12px);
  width:         calc(100% -12px); 
}

ただし、これはバージョン 8 までのすべての IE ユーザーと貧弱な Opera の連中を失格とします:-D (MDN-Compat リストまたはcaniuseを参照してください)。

非常にオールドスクールになりたい場合は、絶対配置を使用します (オーバーフローの問題が発生します)。

#container{
    position:absolute;
    left:12px;right:0;
}

そして、ラッパー要素を使用する少し古い学校：

#outerwrapper{
     padding-left:12px;
}
#container{
     width:100%;
}

マークアップで：

<div id="outerwrapper">
   <div id="container">
   </div>
</div>
于 2013-01-11T13:18:54.090 に答える
1

これを試して

    <style>
body{margin: 0px; padding: 0px;}
#cover
{
    width: 100%;
    height: 200px;

    padding: 0px 0px 0px 12px;
    margin:0px;
}
#inner{width:100%; height: 200px; margin: 0px; padding: 0px; background: #bababa; }

</style>



<div id="cover">  
    <div id="inner">

    </div>
</div>

それはあなたを助けるかもしれません。

于 2013-01-11T13:08:42.767 に答える
0

ルパリとクリストフ、この問題で私を助けてくれてありがとう。私はついに私の問題の解決策を得ました。

<div class="topline">

</div>
    <div class="bgs">
        <div class="bg1 bg"></div>
        <div class="bg2 bg"></div>
        <div class="bg3 bg"></div>
    </div>
<div class="container">

    <header>
        <hgroup>
            <div class="logo">
                <h1>Blah blah</h1>
                <div class="desc">
                lorem ipsum dollar sit amet
                </div>
            </div>
        </hgroup>
    </header>
    <div class="content">

    </div>
    <footer>

    </footer>
</div>


.bgs {
  float: left;
}
.bgs .bg {
  width: 9px;
  height: 100%;
  float: left;
  margin-right: 0px;
}
.bgs .bg1 {
  background: #0068B3;
}
.bgs .bg2 {
  background: #65B561;
}
.bgs .bg3 {
  background: #F99D32;
}
.container {
  margin-left: 50px;
  float: left;
  position: absolute;
}

これでうまくいきます。

于 2013-01-11T14:12:25.523 に答える