html - 当窗口变小时，div 被下推

Question

对 html 和 css 很陌生，我只是遇到标题中描述的问题。我的导航栏正在下推 ID 为 main 的 div。

nav{
width:120px;
float:left;
margin:0px 5px 0px 5px; 

#main{
display:inline-block;
padding: 1em;
float:left;
position:relative;
min-width: 900px;

感谢任何帮助，干杯。

编辑:

大家好，也许我应该更好地解释一下。在页面上，左侧有一个 nav，右侧有一个 div。当窗口宽度变小时，右侧的 div 将被推到导航下方，而不是停留在原处，并且它的内容会显示在屏幕之外。

Answer 1

你已经明确地告诉你的元素要那样做。当您设置 min-width 和以像素为单位的宽度时，您是在告诉您的元素无论发生什么情况都保持相同的大小。删除 min-width 并将宽度设置为百分比值，例如 1% 而不是 50px，如下所示:

nav {
  width: 50%;
  background: red;
  height: 50px;
  float:left;
}
#main {
  display: inline-block;
  height:50px;
  float:left;
  position: relative;
  width: 50%;
  background: black;
}
body {
  margin: 0;
}

<nav></nav>
<div id="main"></div>