div 中的内容未显示

Question

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

<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-text-white

这 CSS class 会使您的文本在白色上显示为白色。

w3-display-bottomleft

CSS class 使您的 div 出现在容器外部：容器的高度为 0，因为它的子项都位于 absolutely。由于上面的 class 有 bottom: 0，div 被渲染在容器上方。

Answer 2

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

div 中的内容未显示

content in div is not showing

html

reactjs