Question

我得到一个空白的网页，我不明白为什么。我注意到如果我在暂存器中'<p'之后放置'>'（是的，没有结束'<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">'），一切正常。

<html>
    <title>rand</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"/>
    <body>
        <div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
            <div class="w3-display-topleft w3-padding-large w3-xlarge">
                Logo
            </div>
            <div class="w3-display-middle">
                <h1 class="w3-jumbo w3-animate-top">COMING SOON</h1>
                <hr class="w3-border-grey rando"/>
                <p class="w3-large w3-center">35 days left</p>
            </div>
            <div class="w3-display-bottomleft w3-padding-large">
                Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank" rel="noopener noreferrer">w3.css</a>
            </div>
        </div>
    </body>
</html>

Answer 1

W3-文本白

此CSS类使您的文字在白色上显示为白色。

W3-显示BOTTOMLEFT

这个CSS类使你的div显示在容器之外：容器的高度为0，因为它的子节点都位于absolute。由于上面的类有bottom: 0，因此div正在容器上方呈现。

Answer 2

我能够通过删除“w3-display-container”并将其替换为具有position: absolute;属性的si_ze来修复它。

div中的内容未显示

2 个答案: