为什么将display:none设置为内联块div内的元素使内联块不呈现为内联块;

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            height: 400px;
            min-width: 200px;
            display: inline-block;
            border: 1px solid grey;
        }
        .item{
            border: 1px solid grey;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container"><div class="item" style="display: none;">123</div></div>
    <div class="container"><div class="item">123</div></div>
    <div class="container"><div class="item">123</div></div>
</body>
</html>

问题是，当我将style="display:none；"添加到第一项时，容器不会内联显示。当我删除display:none时，没关系。谁能告诉我为什么？

您可以将display:none更改为visibility:hidden，这样就可以工作了。

这可以归类为一个解决方案：HERE-默认对齐是基线，如果div中没有任何内容，就没有基线。如果你添加垂直对齐：顶部，你就克服了这一点。这就是为什么我上面的"解决方案"有效——可见性：隐藏使元素内联，而显示：无将其从流中删除。

实际上，我不知道确切的答案，但我可以为您提供一个解决方案：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .container{
            height: 400px;
            min-width: 100px;
            display: inline-block;
            border: 1px solid grey;
        }
        .item{
            border: 1px solid grey;
            margin: 5px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="container"><div class="item" style="display: none;">123</div></div>
    <div class="container"><div class="item">123</div></div>
    <div class="container"><div class="item">123</div></div>
</body>
</html>

尝试

.item{
  border: 1px solid grey;
  margin: 5px;
}

至：

.item{
  border: 1px solid grey;
  margin: 5px;
  float:left
  }

http://jsfiddle.net/djrr93wq/

相关内容

最新更新

热门标签：