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

【问题标题】：Relative width and padding on same element同一元素上的相对宽度和填充
【发布时间】：2011-10-07 08:18:50
【问题描述】：

为了使我的网站更具响应性，我正在尝试学习如何流畅地定义元素。今天我遇到了一个我终于修复的情况，但我不明白为什么修复有效，我想这样做。

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

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

我所拥有的是向左浮动的三个 div。我正在尝试向它们添加填充（作为百分比）并使用 target/context=result，然后使用 *100（因为它是一个百分比。）

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

这最终会为每个 div 提供 100 像素的填充，而不是 20 像素。我最终意识到填充是根据父元素的宽度计算的，而不是 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>

【问题讨论】：

标签： html css responsive-design fluid-layout

【解决方案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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

您希望内边距约为 20 像素。因此，总宽度 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>

【讨论】：