gpt4 book ai didi

html - 我有一些 CSS 混淆和问题

转载 作者:太空宇宙 更新时间:2023-11-04 02:16:18 25 4
gpt4 key购买 nike

我有一些代码导致了一些问题。它应该创建一个带有左、右和中心 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>

最佳答案

您的 #rightDividerwidth: 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com