将 100% div 宽度减少一定数量的像素

Question

我有以下代码，我需要保持原始css不变。问题是内部div 的边框值为 10px，这使得内部div 比外部div 宽 20px。我可以将内部div 的宽度调整为负 20px 来修复吗？我尝试过负利润等，但没有运气有任何想法？

<style>
.content {  
width: 90%; 
float: left;
}
.content-inner {    
float: left;
width: 100%; 
background: #6DA249;
border: 10px solid #333333;
}
body {
padding: 0px;
margin: 0px;

}
</style>
<div class="content">
<div class="content-inner">
dfg
</div>
</div>

Answer 1

避免重写

父<div>属性的最简单解决方案是向 CSS 添加一个更进一步的规则，用于内部<div>：

.content-inner {
  /* other CSS */
  box-sizing: border-box;
}

这会导致浏览器在该类元素的指定宽度中包含边框(和填充(。

当然，如果

做不到这一点，您可以使用 CSS calc() 函数：

.content-inner {
  /* other CSS */
  width: calc(100% - 20px);
}

不过，我确实觉得值得重申的是，默认情况下，设置为 display: block; 的 <div> 将采用其父元素的全宽及其其中包含的边框。这个问题感觉就像你试图解决一个由于故意(尽管无法解释(的选择而存在的问题。

简单地说：如果你不浮动<div>，并留下或设置它display为block，那么你将不需要使用有点实验性的(由MDN定义，在下面的参考资料中(CSS，并且CSS的功能可以追溯到IE 6时代(如果不是更早的话(。

引用：

• box-sizing^{规格，兼容性}。
• calc()^{规格，兼容性}。

Answer 2

如果通过百分比设置div，则不能将其减少像素。 正如您所说，您可以以这种方式定位事物，例如将宽度为 30% 的div 设置为负边距。 边距：-20px; 等。 但您无法调整它们的大小。 解决方案是简单地将宽度的百分比降低一两个个百分点。

Answer 3

边框

的默认行为是扩展其元素的整体尺寸。

您可以使用以下规则更改此默认行为：

box-sizing: border-box;

该css几乎旨在解决这种情况。

Answer 4

我认为其他答案更有趣，但作为替代方案。

考虑这三个 Css 声明。 width: auto; margin: 0; display:block;

元素的自动width应填充其父容器，当边距设置为 0 margin-left 和 margin-right 时，display设置为 block 。

我删除了浮点数和百分比宽度。

---

示例代码片段

 .content {  
   /*
      width: 90%; 
      float: left;
   */
      position:relative;
      left:0; top:0;
   
      display:block;
      margin:0; padding:0;
      width: auto;
      /*margin is 0, so with width set to auto, and display being block.. width auto should go to 100%*/  
    }
    .content-inner {    
    /*
      float: left;
      width: 100%; 
    */
      
      position:relative;
      left:0;top:0;
      
      background: #6DA249;
      border: 10px solid #333333;
      
      display:block; 
      width:auto;
      margin:0; padding:0;    
      
      overflow:auto;
    }
    body {
      position:relative;
      left:0;top:0;
      
      display: block;
      padding: 0; margin: 0;
      width:auto;
      
      overflow:auto;
      }

    <div class="content">
    <div class="content-inner">
    dfg
    </div>
    </div>

---

当您在元素上设置float并且未在父元素(容器(上指定clear时，父元素的属性(宽度和高度(不会拾取和/或考虑浮动子元素的大小width。

此外，您需要在父/容器上显式设置 overflow 样式声明。