Question

我正在对此网站进行一些样式调整 http://neondataskills.org/

我添加了一个顶部条形图像，现在，当您调整页面大小时，顶部条形图形如果太宽则会与导航重叠。我想强制图像向下推动导航栏。

HTML看起来像这样：

<div class="navigation-wrapper">
<div class="NEON-header">
<img src="/images/banners/header_whole.png" alt="NEON" style="width:100%;">
</div>
    <div class="site-name">
        <a href="{{ site.url }}">{{ site.title }}</a>
    </div><!-- /.site-name -->
    <div class="top-navigation">
        <nav role="navigation" id="site-nav" class="nav">
            <ul>
                {% for link in site.links %}
                <li><a href="{% if link.external %}{{ link.url }}{% else %}{{ site.url }}{{ link.url }}{% endif %}" {% if link.external %}target="_blank"{% endif %}>{{ link.title }}</a></li>
                {% endfor %}
            </ul>
        </nav>
    </div><!-- /.top-navigation -->
</div><!-- /.navigation-wrapper -->

目前，网站名称和顶部导航div已被覆盖＆＃34;当你使页面更宽时，通过NEON-header div。我在堆栈中发现了一些代码，表明我需要使用＆＃34;＆＃34;然而，我的css中的元素似乎也无效。

CSS：

.NEON-header {
    background-color: #1ea0c1;
    height: 0;
    margin: 0 0 10em;
    padding: 0;
}

/* this could potentially force the div to clear but it doesn't */
.NEON-header:before, .NEON-header:after {
    display: table;
    line-height: 0;
    content: ""
}
.NEON-header:after {
    clear: both;
}

.navigation-wrapper::before, .navigation-wrapper::after {
    content: "";
    display: table;
    line-height: 0;
}
.navigation-wrapper::after {
    clear:both;
}

.site-name {
    display: inline;
    float: left;
    font-size: 1.2rem;
    margin-left: 4.16667%;
    margin-right: 4.16667%;
    padding: 1em 0 0;
    width: 16.6667%;
}

.top-navigation {
    display: inline;
    float: left;
    margin-left: 0;
    margin-right: 0;
    padding: 1em 0 0;
    width: 75%;
}

还有什么想法我可以尝试强制div在彼此之上和之下堆叠而不是让顶部div重叠到导航栏中？非常感谢任何想法利亚

Answer 1

问题是你的.NEON-header身高0px，你的图像尺寸正在增长。只需从height: 0;中删除.NEON-header即可。例如：

.NEON-header {
  background-color: #1ea0c1;
  margin-bottom: 30px;
}

div重叠 - 流体/引导

1 个答案: