0

我有 3 个 div。一内一。第一个 div（黄色背景）具有绝对宽度和高度。第二个 div（绿色背景）位于第一个 div 内部，具有 100% 的宽度和高度。位于第二个的最后一个（红色背景）具有水平和垂直居中的参数。问题是只有当第二个 div 有边框时，一切才能正常工作。

这是代码

<div  id="div1" style="width: 100; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

第二个div中的边框如下

border: 3px solid black

我不需要这个边框，如果我删除它，那么我的 div 的位置会发生巨大变化。

您可以查看屏幕截图或尝试jsfiddle

请不要建议我让边框不可见、透明或类似的东西。

请帮助我在不使用边框的情况下保持 div 的位置。PS 用户 jvilhena 建议我使用 position:absolute 作为第二个 div。它解决了问题，但我不能将它用于我的代码。请教我另一种方式。

4

1 回答 1

0

第二个 div 的背景位置以某种方式向上“移动”，可能是因为第三个 div 的边距：-30px（如果将它们并排放置，您可以看到）。如果将 position:absolute 添加到第二个 div，它可以解决问题：

<div  id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 10px; top: 20px; z-index: 2">
<div  id="div2" style='width:100%;height:100%;background-color:green;border: 3px solid black'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div with border
</div>
</div>
</div>

<div id="div1" style="width: 200px; height: 70px; position: absolute;background-color:yellow;left: 250px; top: 20px; z-index: 2">
<div id="div2" style='width:100%;height:100%;background-color:green;position: absolute;'>
<div id="div3" class="div_hover" style="width: 90px; height: 60px; position: relative; top: 50%; margin: -30px auto auto; border: 1px dashed rgb(0, 0, 0);background-color: red;">div without border
</div>
</div>
</div>
于 2013-05-16T14:54:34.250 回答