Question

以下两个文档在Chrome（不确定其他浏览器）中显示非常错误，其中div的顶部不对齐。我想知道是否有办法解决这个问题。

<!DOCTYPE html>
<html>
  <head>
    <style>
      body,html
      {
        height:100%;
      }
      .test
      {
        position:relative;
        display:inline-block;
        width:30%;
        height:30%;
        outline:1px solid black;
      }
    </style>
  </head>
  <body>

    <div class="test">
      <div class="test"></div>
    </div>
    <div class="test"></div>
  </body>
</html>

和

<!DOCTYPE html>
<html>
  <head>
    <style>
      body,html
      {
        height:100%;
      }
      .test
      {
        position:relative;
        display:inline-block;
        width:30%;
        height:30%;
        outline:1px solid black;
      }
    </style>
  </head>
  <body>

    <div class="test">
      <div class="test"></div>
    </div>
    <div class="test">test</div>
  </body>
</html>

我目前唯一找到的解决方法是

  .test:after
  {
    content:"\0";
  }

这会让浏览器认为.test有内容，但也许还有其他方法可以修复它？

编辑：澄清一下，我正在寻求答案的问题不是“我如何将div排在最前面”，更像是“为什么呢？内容与无内容对比nested-divs效果div在页面上的位置是否有一个非丑陋的修复？“

Answer 1

将float: left;或float: right;添加到.test div会使它们排在最前面。

Answer 2

相对嵌套的内部亲戚导致此问题，您可以尝试此Fiddle

 <div class="test">
  <div class="test">&nbsp</div>
  <div class="test">&nbsp</div>
</div>
<div class="test">&nbsp</div>

在div旁边显示内容，没有内容布局错误

2 个答案: