Question

因此，我正在制作一个只是为了好玩的小网站 - 并且更好地学习HTML。

我有四个div。我希望它被安排得像拼贴画。我有三个处于完美位置，但第四个根本没有出现，除非我用显示器使其他三个看不见：CSS中没有...

任何人都知道为什么会这样吗？我在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;
}

Answer 1

从我在Chrome和Firefox中看到的内容中，cont4正在显示，但它在页面上显示下来（您必须滚动才能看到它）。我不确切知道你想要它的位置，但是添加top：-1040px将它与页面顶部的其他div对齐。

#cont4{
    width:230px;
    height: 350px;
    background-color:purple;    
    position: relative;
    left: 240px;
    top: -1040px;
}

Answer 2

给#cont4 top: -1040px;。这意味着，对于之前的div，您应用了-520px顶部以使其对齐顶部。因此，要显示紫色div，this lengh + height of that div（520 + 520 = 1040）是必需的。 Here 是演示。

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

此外，最高行为可能因位置类型而异，绝对，相对或固定。

以下是更正的 demo

Answer 3

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

此外，THIS是非常有用的资源。 THIS工具很有意思。你也可以检查一下。

第四个div没有显示，除非其他人设置显示：none

3 个答案: