Question

为了使我的网站更具响应性，我正在努力学习如何流畅地定义元素。今天我遇到了一个我最终解决的情况，但我不明白为什么修复工作正常，我想。

我无法链接到网站（NDA），但我已经提供了一些包含相关元素的示例页面：

错误：http://cruxwire.com/wrong.html 右：http://cruxwire.com/right.html

我拥有的是剩下的三个div。我正在尝试为它们添加填充（以百分比表示）并使用目标/上下文=结果，然后使用* 100（因为它是百分比。）

Ethan Marcotte的响应式网页设计副本说“在元素上设置灵活填充时，你的上下文就是元素本身的宽度。”我给div的宽度为20％。由于父元素是945px，因此每个div的像素宽度为189px。我想添加20px的填充，所以20/189 = 0.1058201058201058。我在10.58201058201058％的每个div中添加了一个填充。

这最终给每个div一个100px的填充，而不是20px。我最终意识到填充是基于父元素的宽度计算的，而不是div本身。

我的解决方案是在每个现有的div周围添加一个额外的div，这样我可以将宽度应用于一个，将填充应用于另一个，这样就解决了问题。

为什么填充计算相对于其父元素而不是其自己的元素？

如何在不添加额外div的情况下执行此操作？

您可以在此帖子中看到链接到的网页上的代码，我也在下面添加了该代码。

WRONG：

<!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>

RIGHT：

<!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>

Answer 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/

Answer 2

假设target / context = result是正确的，但这包括元素的宽度，填充和边距。

我已经制作了一个codepen，因此你可以看到它是如何工作的 - 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>

Answer 3

这是一种方法，无需添加额外的div：

您希望填充大约为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>

相同元素上的相对宽度和填充

3 个答案: