[英]CSS - Media queries - elements not stacking / floating properly
我正在為平板電腦大小的屏幕設置媒體查詢,我的導航欄,標題徽標和頂部似乎不想正確堆疊。 如果固定導航欄的位置,我將丟失該節的標題,或者如果將導航位置設置為靜態,則導航欄將試圖隱藏在其后面。 因此,當我縮小到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>
任何幫助表示贊賞。
我認為您的問題是身高! 嘗試使用最小高度。
提供如此大量的代碼后,很難在代碼中發現錯誤。 您應該發布相關的html,使用css-flexbox或bootstrap網格(或任何其他網格系統)。 你只能(withot任何其他樣式)找到Bootrstrap第4節格在這里 。 希望能幫助到你!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.