0

所以我制作一个小网站只是为了好玩——并且更好地学习 HTML。

我有四个 div。我希望它被安排得有点像拼贴画。我将其中三个放在完美的位置，但第四个根本不显示，除非我在 CSS 中使用 display:none 使其他三个不可见...

有谁知道为什么会发生这种情况？我在 Ubuntu 上使用 Chromium。

<body>
  <center>
    <div id="content1">

    </div>
    <div id="content2">

    </div>
    <div id="content3">

    </div>
    <div id="cont4">
    THIS ONE DOESN'T SHOW UP.
    </div>
  </center>
</body>

这是CSS：

#content1{
    width:230px;
    height: 160px;
    background-color:blue;
    border-radius:10px;
    position: relative;
    left: -240px;
}
#content2{
    width:230px;
    height: 350px;
    background-color:red;   
    margin-top: 10px;
    border-radius:10px;
    position: relative;
    left: -240px;
}
#content3{
    width:230px;
    height: 520px;
    background-color:red;   
    border-radius:10px;
    position: relative;
    top: -520px;
}
#cont4{
    width:230px;
    height: 350px;
    background-color:purple;    
    position: relative;
    left: 240px;
}
4

3 回答 3

1

从我在 Chrome 和 Firefox 中看到的内容来看，cont4 出现了，但它在页面上向下（你必须滚动才能看到它）。我不知道你想要它的确切位置，但添加 top: -1040px 会将它与页面顶部的其余 div 对齐。

#cont4{
    width:230px;
    height: 350px;
    background-color:purple;    
    position: relative;
    left: 240px;
    top: -1040px;
}
于 2012-09-09T16:21:56.830 回答
0

给#cont4一个top: -1040px;。这意味着，对于前一个 div，您应用了一个-520px顶部以使其与顶部对齐。所以你的紫色 div 需要this lengh+ height of that div(520+520=1040) 才能出现。这是演示。

但这不是我的解决方案。使用margin-top: -520px;而不是top: -520px;到您的第三个 div。这会将第四个 div 与第三个 div 一起移动。但top不会这样做。top用于使用position属性调整元素。margin-top用于测量与前一个元素的外部距离。

此外，顶部行为可能会因位置的类型（绝对、相对或固定）而有所不同。

这是更正后的演示

于 2012-09-09T16:19:23.930 回答
0

center正如 Jared Farrish 所说，该标签已被弃用。实际上，您应该更仔细地使用 CSS 来获得这种类型的布局。有很多示例可用。尝试使用“使用 CSS 的多列布局”进行搜索。您可以查看本教程。

此外，这是非常有用的资源。这个工具很有趣。你也可以检查一下。

于 2012-09-09T17:09:42.460 回答