Html CSS-媒体查询-元素未正确堆叠/浮动
我正在为平板电脑大小的屏幕设置媒体查询，我的导航栏、标题徽标和顶部部分似乎不想正确堆叠。如果我固定导航的位置，我将丢失节标题，或者如果我将导航位置设置为静态，导航条将试图隐藏在其后面。所以，当我降低到680px或更低时，我会在屏幕顶部看到这个- 或本条— 它在480px及以下都能正常工作，所以不确定我做错了什么。以下是我对媒体的提问-Html CSS-媒体查询-元素未正确堆叠/浮动,html,css,responsive-design,media-queries,Html,Css,Responsive Design,Media Queries,我正在为平板电脑大小的屏幕设置媒体查询，我的导航栏、标题徽标和顶部部分似乎不想正确堆叠。如果我固定导航的位置，我将丢失节标题，或者如果我将导航位置设置为静态，导航条将试图隐藏在其后面。所以，当我降低到680px或更低时，我会在屏幕顶部看到这个- 或本条— 它在480px及以下都能正常工作，所以不确定我做错了什么。以下是我对媒体的提问- @media screen and (max-width: 680px) { nav { float: none;
@media screen and (max-width: 680px) {
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
}
}
@media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
position: static;
}
nav a {
display: block;
border-bottom: 0;
}
nav a:hover {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
font-size: 20px;
}
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
<a href="#logo">Home</a>
<a href="#whatwedo">What we do</a>
<a href="#whoweare">Who we are</a>
<a href="#partners">Who we work with</a>
<a href="#contact">Say hello</a>
<a href="Blog">Blog</a>
</nav>
</header>
<section id="whatwedo">
<div class="container-fluid">
<h1><span style="color: rgb(133,52,146);">+</span>What we do</h1>
<div class="cols">
<div class="row no-gutters">
<div class="col-md-3">
<h2>ADVERTISING</h2>
<img src="images/advertising.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>GRAPHIC DESIGN</h2>
<img src="images/graphic_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND IDENTITY</h2>
<img src="images/brand_identity.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND GUIDELINES</h2>
<img src="images/beard.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-3">
<h2>PRINT MANAGEMENT</h2>
<img src="images/print.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>CREATIVE DIRECTION</h2>
<img src="images/creative_direction.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>EDITORIAL DESIGN</h2>
<img src="images/ed_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>AND LOTS OF OTHER STUFF</h2>
<img src="images/other_stuff.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
</div>
</div>
</section>
+我们所做的
广告
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
平面设计
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
品牌识别
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
品牌指南
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
打印管理
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
创作方向
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
编辑设计
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
还有很多其他的东西
Lorem ipsum，dolor sit amet Concertetur Adipising Elite。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。这是一个很好的替代品。Lorem ipsum，door sit amet concertetur adipsicing elit.。化名为cum repellat velit quae suscipit。
谢谢你的帮助 我想你的问题是身高！
试试最小高度。我想你的问题是高度！
尝试使用最小高度。当提供了这么多高度时，很难在代码中找到错误。您应该发布相关的html，使用css flexbox或引导网格（或任何其他网格系统）。您只能找到Bootrstrap v.4 grid（没有任何其他样式）。希望有帮助 提供这么多代码时，很难在代码中找到错误。您应该发布相关的html，使用css flexbox或引导网格（或任何其他网格系统）。您只能找到Bootrstrap v.4 grid（没有任何其他样式）。希望有帮助 也共享页面的HTML。@Paul只需更新