gpt4 book ai didi

html - div重叠-流体/ Bootstrap

转载 作者:行者123 更新时间:2023-11-28 07:37:57 29 4
gpt4 key购买 nike

我正在对这个站点进行一些样式调整 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 会被 NEON 标题 div“覆盖”。我在堆栈中发现了一些代码,提示我需要在我的 css 中使用“after”元素,但这似乎也不起作用。

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 重叠到导航栏中的想法吗?非常感谢任何想法利亚

最佳答案

问题是您的 .NEON-header 的高度为 0px,并且您的图像尺寸正在增大。只需从 .NEON-header 中删除 height: 0;。示例:

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

关于html - div重叠-流体/ Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31126900/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com