display: none 删除整个 div答案

【问题标题】：display: none removes whole divdisplay: none 删除整个 div
【发布时间】：2022-01-04 22:43:00
【问题描述】：

@media (max-width: 500px){
    .about-content {
        grid-template-columns: 1fr;
    }


    .cardcontent {
        grid-template-columns: 1fr;
    }

    .footer-links {
        float: left;
    }
    
    .brand-title {
        display: initial;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links { 
        width: 100%;
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        display: flex;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-link li a {
        padding: 0.5rem 1rem;
    }

    .navbar-links.active{
        display: flex;
    }

    .banner-text{
        display: none;
    }
}

<header> 
        <nav class="navbar"> <!-- Element for Website Navigation-->
          <div class="brand-title">RAZA</div>
          <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
          </a>
          <div class="navbar-links">
            <ul>
              <li><a href="about me.html">About Me</a></li>
              <li><a href="index.html">Portfolio</a></li>
              <li><a href="src/Resume.pdf" target="_blank">Resume</a></li>
            </ul>
          </div>
        </nav>

        <div class="banner">
          <img src="src/Banner Image.svg" class="banner-img rellax" data-rellax-speed="10">
          <div class="banner-text rellax" data-rellax-speed="2">
            <h1>RAZA</h1>
            <h2 style="
            font-size: 1.85rem;">Shabih-ul-Hassan</h2>
            <h4 style="
            font-weight: bold">Graphic Designer & Video Editor</h4>
          </div>
        </div>
      </header>

所以我正在建立一个关于 html 和 css 的投资组合网站。我希望在屏幕宽度缩小到一定尺寸后横幅消失。

问题是当我删除带有display: none 的横幅时，它会带走包含导航栏的完整父级。

当我使用 visibility: hidden 时它工作正常，但它留下了这个空洞的空间。

【问题讨论】：

分享示例代码以更好地理解
当然。对于那个很抱歉。以前从未使用过堆栈溢出。我希望这就足够了
您在 css 中将 .navbar-links display 设置为 none，这使得导航栏的一部分与 .banner-text 类的 div 一起消失
已删除，但仍然无法正常工作。

标签： html css display

【解决方案1】：

我设法回答了这个问题。只需要转一个位置：相对于绝对值。那是如何工作的？不知道。但是，嘿，还在学习中

【讨论】：

【解决方案2】：

@media screen and (max-width: 768px){
    .banner{
        display: none;
    }
}

亲爱的！不知何故，CSS 编码不正确。从您拥有的样式中删除所有内容并添加上述媒体查询。例如，此查询将适用于移动设备，并且横幅将在切换到移动屏幕时移除。我希望它对你有用:)

【讨论】：

所以我应该从头开始创建媒体查询？
也还是不行。对不起。
奇怪！这对我有用。当您切换到移动设备时，横幅会移除，并且只留下导航栏。