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);
}

我觉得值得重申，默认情况下，设置为<div>的{{1}}将采用其父元素的全宽及其中包含的边框。这个问题感觉就像你正试图解决因故意（虽然无法解释）选择而存在的问题。

简单地说：如果你不浮动display: block;，并离开或设置<div>为display，那么你就不会需要使用一些实验性的（由MDN定义，在下面的参考文献中）CSS并且将具有回到IE 6时代的CSS（如果不是更早的话）。

参考文献：

box-sizing ^{specifications，compatibility}。
calc() ^{specifications，compatibility}。

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时，{{ 1}}设置为display。

我删除了浮动和百分比宽度..

示例代码段

＆＃13;

block

＆＃13;

 .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;
      }

＆＃13;

在元素上设置<div class="content"> <div class="content-inner"> dfg </div> </div>，不要在父元素（容器）上指定float时，属性（宽度和高度）父母不会提取和/或说明浮动子元素的大小..这会弄乱自动clear。

此外，您还需要在父/容器上显式设置width样式声明..

通过一定量的像素减少100％的div宽度

4 个答案:

示例代码段