我有一些代码导致了一些问题。它应该创建一个带有左、右和中心 Pane 的基本 div。左 Pane 在加载时工作得很好，但随后包含相同 css 样式的右 Pane 以折叠边距显示其子项。我的第一个问题是为什么 margin-top 对右 Pane 中的 child 不起作用？
编辑:我通过在右 Pane 的 css 中使用 padding-top: 0.5px 解决了这个问题。
然后我阅读了一些关于 margin collapsing 的内容，并决定让 .picHolderSide 类的样式包含 position: absolute;顶部:0；左:0；
这导致了一些我没有预料到的问题，因为我知道绝对定位的元素将基于下一个定位的父元素定位，在这种情况下将是右 Pane 。我的下一个问题是，是否有人可以重复我所做的，并尝试告诉我为什么它会这样做，因为这很难解释。
最后我遇到了另一个问题，这让我说好吧，让我们继续堆栈溢出。我将 .picHolderSide 类的宽度属性更改为 140px 而不是 100% 这会导致右 Pane 中的子项完美重叠 children 在左 Pane 中!我不确定我在这方面做错了什么，但如果有人能帮助我解决这 3 个问题，我将不胜感激。提前谢谢你。
<html>
<head>
<style type = "text/css" rel = "stylesheet">
#photoSliderContainer{
height: 500px;
width: 700px;
background-color: black;
position: relative;
left: 0;
top: 0;
}
#leftDivider{
background-color: rgb(50, 50, 50);
height: 100%;
width: 20%;
position: absolute;
left: 0;
top: 0;
}
#rightDivider{
background-color: rgb(60, 60, 60);
height: 100%;
width: 20%:
position: absolute;
left: 80%;
top: 0;
}
#centerDivider{
height: 100%;
width: 60%;
background-color: rgb(70, 70, 70);
position: absolute;
left: 20%;
top: 0;
}
#bottomDivider{
position: absolute;
background-color: rgb(80, 80, 80);
height: 20%;
width: 100%;
top: 80%;
left: 0;
}
.picHolderSide{
height: 100px;
width: 100%;
background-color: rgb(90, 90, 90);
margin-top: 25px;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div id = "photoSliderContainer">
<div id = "leftDivider">
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
</div>
<div id = "centerDivider">
<div id = "bottomDivider">
</div>
</div>
<div id = "rightDivider">
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
</div>
</div>
</body>
</html>
最佳答案
您的 #rightDivider 在 width: 20% 之后有一个冒号 :。它应该是一个分号 ;。这会导致该容器的宽度以及 position: absolute 都无效。这是该 ID 的正确代码:
#rightDivider{
background-color: rgb(60, 60, 60);
height: 100%;
width: 20%;
position: absolute;
left: 80%;
top: 0;
}
提示:使用 Chrome 开发者工具 (F12) 检查您的代码和 CSS。您可以看到宽度和位置被浏览器划掉了。
关于html - 我有一些 CSS 混淆和问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38862676/