所以我正在制作一个小网站只是为了好玩 - 并更好地学习 HTML。
我有四个 div。我想让它们像拼贴画一样排列。我将其中三个放在了完美的位置，但是第四个根本不显示，除非我使用 display:none 在 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;
}
最佳答案
从我在 Chrome 和 Firefox 中看到的情况来看，cont4 正在显示，但它在页面的下方(您必须滚动才能看到它)。我不知道你想要它的确切位置，但添加 top: -1040px 会将它与页面顶部的其余 div 对齐。
#cont4{
width:230px;
height: 350px;
background-color:purple;
position: relative;
left: 240px;
top: -1040px;
}
关于css - 第四个 div 不显示，除非其他人设置为显示 : none，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12340640/