4

Webサイトの応答性を高めるために、要素を流動的に定義する方法を学ぼうとしています。今日、ようやく修正した状況に出くわしましたが、なぜ修正が機能したのかわかりません。

サイト（NDA）にリンクできませんが、問題の要素を含むサンプルページをいくつか掲載しました。

間違った例：http ：//cruxwire.com/wrong.html正しい例：http ：//cruxwire.com/right.html

私が持っているのは、3つのdivが左に浮かんでいることです。それらに（パーセンテージとして）パディングを追加しようとしており、target / context = resultを使用してから、* 100（パーセンテージであるため）を使用しています。

EthanMarcotteによるレスポンシブWebデザインの私のコピーは、「要素に柔軟なパディングを設定する場合、コンテキストは要素自体の幅です」と述べています。 私はdivに20％の幅を与えました。親要素が945pxであるため、各divのピクセル幅は189pxです。20pxのパディングを追加したかったので、20/189=0.1058201058201058。10.58201058201058％の各divにパディングを追加しました。

これにより、各divに20pxではなく100pxのパディングが与えられます。最終的に、パディングはdiv自体ではなく、親要素の幅に基づいて計算されていることに気付きました。

私の解決策は、既存の各divの周りに追加のdivを配置して、一方に幅を適用し、もう一方にパディングを適用できるようにすることでした。これで問題は解決しました。

パディングが、それ自体の要素ではなく、その親要素を基準にして計算されるのはなぜですか？

追加のdivを追加せずにこれを行うにはどうすればよいですか？

この投稿にリンクされているページでコードを確認できます。以下にもコードを追加しました。

間違い：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WRONG</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; padding:10.58201058201058%; background-color:yellow; } /* 20px/189px */
.slide { position:relative; margin:0 1%; background-color:red; }
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>

<div id="main">
    <div id="slideshow">
        <h1>WRONG</h1>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
</body>
</html>

右：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>RIGHT</title>
<style>
#main { width:945px; margin:0 auto; padding:40px 0; background-color:blue; }
#slideshow { background-color:green; }
.threecolumn { float:left; width:20%; margin:0 1%; background-color:yellow; } 
.slide { position:relative; padding:10.58201058201058%; background-color:red; } /* 20px/189px */
p { background-color:white; margin:0; padding:0; }
</style>
</head>
<body>

<div id="main">
    <div id="slideshow">
        <h1>RIGHT</h1>
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>  
        <div class="threecolumn">
            <div class="slide">
                <p>According to Firebug, this element has 20px padding.</p>
            </div>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

</body>
</html>
4

3 に答える 3

1

W3 ボックス モデルには、計算された幅にパディングが含まれます。実際にやりたいことは、パディングが必要なコンテンツを別の div でラップし、使用できないパディングと同等のマージンをその div に適用することです。

HTML の例:

<div id="nav">
    <div class="block" id="left">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="middle">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
    <div class="block" id="right">
        <div>
            <h1>blah blah</h1>
        </div>
    </div>
</div>

CSS の例:

.block {
    width:33%;
    height:50%;
    position:relative;
    float:left;
    background-color:#CCC;
    /** Instead of applying a 20px padding here... */
}

.block>div {
    margin:20px; /* we apply a 20px margin here */
}

http://jsfiddle.net/AlienWebguy/Yf34X/1/

于 2011-07-18T00:34:20.473 に答える
0

余分な div を追加せずにそれを行う 1 つの方法を次に示します。

パディングを約 20px にする必要があります。したがって、全幅 945 ピクセルのうち 20 ピクセル = 20/945 x 100 = 2.116402116%

したがって、元の「間違った」コードで 10.58% の代わりにこのパーセンテージを使用すると、目的の効果が得られます。以下は、「間違った」例に対して提供したコードで、css を変更しただけです。

CSS:

#main { 
width:945px; 
margin:0 auto; 
padding:40px 0; 
background-color:blue; 
}
#slideshow { 
background-color:green; 
}
.threecolumn { 
float:left; 
width:20%; 
padding:2.116402116%;  /*<<<<<<<<padding is 20px/945px*/
background-color:yellow; 
} 
.slide { 
position:relative; 
margin:0 1%; 
background-color:red; 
}
p { 
background-color:white; 
margin:0; 
padding:0; 
}

HTML:

<div id="main">
    <div id="slideshow">
        <h1>WRONG</h1>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div class="threecolumn slide">
            <p>According to Firebug, this element has 100px padding.</p>
        </div>
        <div style="clear:both;"></div>
    </div>
</div>
于 2013-12-30T11:36:14.217 に答える
0

target / context = result と仮定するのは正しいですが、これには要素の幅、パディング、およびマージンが含まれます。

私はコードペンを作ったので、それがどのように機能するかを見ることができます - http://codepen.io/justincavery/pen/dtusa

余分な div を追加する必要はありません。ターゲットとコンテキストのルールに従うだけですが、パディングとマージンに関しては、現在の要素ではなく、コンテキストが親コンテナーであることを覚えておいてください。

.wrapper {
  margin: 0 auto;
  width: 1000px;
}
#main { 
  width:100%;
  padding:40px 0; 
  background-color:blue; 
  float:left
  }
.pixeled { 
  float:left;
  background-color:green;
  width: 400px;
  margin: 25px;
  padding: 25px;
}
.percentaged { 
  float:left; 
  width:40%; 
  padding:2.5%; 
  background-color:yellow;
  margin:2.5%;
}


<div class="wrapper">
<div id="main">
   <div class="pixeled">
       <div class="inner">
     This is content
  </div>     
  </div>
  <div class="percentaged">
    <div class="inner">
     This is conent
  </div>   
  </div>
</div>

</div>
于 2013-01-31T07:35:58.160 に答える