Question

我得到了不同的divs嵌套：

<div id="outer">

    <div id="parametros"></div>

    <div id="resultados">

        <div id="graficos">
                <div id="bars"></div>
                <div id="fx"></div>
                <div id="pinchetabla">Tabla inútil</div>
        </div>

        <div id="loquerealmenteimporta"></div>  
    </div>

</div>

我添加了以下CSS：

#outer{

  padding-left: 15px;
  padding-top: 15px;
  width: 1350px; 
  height: 640px;
  outline : 1px solid black;

}

#parametros {
  float:left;
  width: 20%;
  height: 100%;
  outline : 1px solid black;

}

#resultados {
  float:right;
  width: 80%;
  height: 100%;
  outline : 1px solid black;
}

      #graficos {
        height: 75%;
        width: 100%;
        outline : 1px solid black;
      }

          #bars {
            float: left;
            height: 100%;
            width: 30%;
            outline : 1px solid black;
          }

          #fx {
            float: left;
            height: 100%;
            width: 30%;
            outline : 1px solid black;
          }          

          #pinchetabla {
            float: left;
            height: 100%;
            width: 40%;
            outline : 1px solid black;
          }

      #loquerealmenteimporta {
        height: 25%;
        width: 100%;
      }

为了将所有元素分开，我添加了一条边框线，然后是result is not exactly what I expected。我知道每个div都有自己的特定厚度的边界线，所以这种情况发生了。

什么属性提供了预期的结果？

Answer 1

您可以使用box-shadow:inset 0 0 0 1px;绘制元素的内部边框，这样就会重叠。

测试可以查看元素的位置，而不会影响边距和大小。 http://jsfiddle.net/8X9Xk/1/

#loquerealmenteimporta {
    height: 25%;
    width: 100%;
    box-shadow:0 0;
}
div {
    box-shadow:inset 0 0 0 1px;
}

Answer 2

你可以用css3 box shadow

来实现这个目的

.box {
   box-shadow: 0 0 0 0 #e9e9e9, 0 0 0 0 #e9e9e9, 1px 1px 0 0 #e9e9e9, 1px 0 0 0 #e9e9e9 inset, 0 1px 0 0 #e9e9e9 inset;
 }

如何将线条边框添加到多个不重叠的外部和内部div

2 个答案: