Question

我有一些代码导致了一些问题。它应该创建一个带有左，右和中间窗格的基本div。左窗格在加载时工作正常，但是然后保持相同css样式的右窗格显示其子窗口具有折叠边距。我的第一个问题是为什么在右侧窗格中，边缘顶部不能为孩子们工作？

修改：我在右侧窗格的CSS中使用 padding-top: 0.5px 修复了此问题。

然后我读了一些关于边缘折叠的内容，并决定使.picHolderSide类的样式包含position: absolute; top: 0; left: 0; 这引起了一些我没有预料到的问题，因为我知道绝对定位的元素将基于下一个定位的父元素定位，在这种情况下它将是右窗格。我的下一个问题是，如果有人可以重复我的所作所为，并试着告诉我它为什么会这样做，因为它很难解释。

然后最后我遇到了另一个问题，这个问题让我说好吧让我们继续堆栈溢出。我将.picHolderSide类的width属性更改为140px而不是100%，导致右窗格中的子项与左窗格中的子项完全重叠！我不确定我的错误是什么，但如果有人能帮我解决这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>

Answer 1

: width: 20%之后;有冒号position: absolute。它应该是一个分号#rightDivider{ background-color: rgb(60, 60, 60); height: 100%; width: 20%; position: absolute; left: 80%; top: 0; }。这导致该容器的宽度无效，以及DateTime.ToUniversalTime。这是该ID的正确代码：

DateTime serverTime = DateTime.Now;    
DateTime utcTime = serverTime.ToUniversalTime;   
string timeZoneId = "some time zone id";
TimeZoneInfo myTime = TimeZoneInfo.FindSystemTimeZoneById(timeZoneId);

DateTime label = TimeZoneInfo.ConvertTimeFromUtc(utcTime, myTime);

提示：使用Chrome开发者工具（F12）检查您的代码和CSS。您可以通过浏览器看到宽度和位置被划掉。

我有一些css混乱和问题

1 个答案: