我想知道当我最小化屏幕宽度时如何阻止 div 落在我的导航/信息栏下。信息栏的高度为 1200 像素，当我决定最小化宽度时，我只想让它位于左侧而不受 div 和其他代码的干扰。
或者更好的是，如果有人可以告诉我如何在浏览器最小化时缩小“信息栏”的高度，而 div 位于它下方，那将非常有帮助。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href=o>
<link href="https://fonts.googleapis.com/css?family=Abel|Abril+Fatface|Amaranth|Arapey|Armata|Asap+Condensed|Bellefair|Cabin+Condensed|Cormorant+Unicase|Cormorant+Upright|Dancing+Script|EB+Garamond|Economica|Frank+Ruhl+Libre|Great+Vibes|Gruppo|Gudea|Halant|Heebo|Hind+Guntur|IM+Fell+Great+Primer+SC|Italianno|Karla|Kreon|Kristi|Kurale|Molengo|Old+Standard+TT|Open+Sans+Condensed:300|Ovo|Parisienne|Pinyon+Script|Poiret+One|Pontano+Sans|Prata|Quattrocento|Rouge+Script|Share|Spectral|Tangerine|Tenali+Ramakrishna|Trirong|Voces|Yantramanav|Yrsa" rel="stylesheet">
<title></title>
</head>
<body>
<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div>
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
text-align:center;
font-family
}
h1{
background-color:black;
color:white;
padding:1em;
font-size:2em;
}
.menu{
background-color:gray;
width:200px;
height:1200px;
position:relative;
float:left;
}
.red{
position:relative;
border:1px solid red;
float:left;
width:350px;
height:350px;
}
@media screen and (min-width:600px){
.red{
}
}
最佳答案
这可能有帮助:
您可以将宽度更改为“%”
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
text-align: center;
font-family
}
h1 {
background-color: black;
color: white;
padding: 1em;
font-size: 2em;
}
.menu {
background-color: gray;
width: 25%;
height: 1200px;
position: relative;
float: left;
}
.right {
float: left;
width: 75%
}
.red {
position: relative;
border: 1px solid red;
float: left;
width: 100%;
height: 350px;
}
@media (max-width:600px) {
.menu {
width: 35%;
}
.right {
width: 65%
}
}<h1>Site</h1>
<nav>
<ul class="menu">
<li>Information</li>
<li>Wanting</li>
<li>To</li>
<li>Stay</li>
<li>Undisruptive</li>
<li>To</li>
<li>Div's</li>
</ul>
</nav>
<div class="right">
<div class=red>
</div>
<div class=red>
</div>
<div class=red>
</div>
</div>关于html - 导航栏干扰 Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46662312/