CSS - 媒体查询 - 未正确堆叠/浮动的元素
我正在为平板电脑尺寸的屏幕设置媒体查询，我的导航栏，标题徽标和顶部部分似乎不想正确堆叠。如果我固定导航的位置我正在丢失部分标题或者如果我将导航位置设置为静态导航栏试图隐藏它后面。所以，当我减少到680px或更低时，我会把它放在屏幕的顶部 -
或者这个 -
这一切都在480px及以下堆叠，所以不确定我做错了什么。这是我的媒体查询 -
@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;
}
HTML
<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>
任何帮助表示赞赏。
2 个答案:
答案 0 :(得分：0)
我认为你的问题是身高！ 尝试使用最小高度。
答案 1 :(得分：0)
在提供此数量的代码时，很难在代码中发现错误。你应该发布相关的html，使用css-flexbox或bootstrap网格（或任何其他网格系统）。您只能找到Bootrstrap v.4网格（没有任何其他样式）here。希望它有所帮助！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？