Html 在浏览器上移动不到位的元素会重新调整大小，没有任何帮助
在我的浏览器（chrome）上，最大化后，它看起来和我想要的一模一样。只要我重新调整浏览器的大小（哪怕只是一点点），导航和徽标就会移动，重叠/堆叠在一起……我已经研究了几天，尝试了很多不同的方法，包括用%定位所有元素，为容器div指定最小宽度，而没有任何帮助。我显然错过了什么。请帮帮我，我要疯了！p、 标志位于左右导航之间Html 在浏览器上移动不到位的元素会重新调整大小，没有任何帮助,html,css,browser,resize,Html,Css,Browser,Resize,在我的浏览器（chrome）上，最大化后，它看起来和我想要的一模一样。只要我重新调整浏览器的大小（哪怕只是一点点），导航和徽标就会移动，重叠/堆叠在一起……我已经研究了几天，尝试了很多不同的方法，包括用%定位所有元素，为容器div指定最小宽度，而没有任何帮助。我显然错过了什么。请帮帮我，我要疯了！p、 标志位于左右导航之间 <body> <div id="index_container"> <a href="#"><img id="logo" alt=
<body>
<div id="index_container">
<a href="#"><img id="logo" alt="Logo" title="Home" src="#"/></a>
<div id="top_wrap">
<nav class="left">
<a href="#" title="About" alt="About Us">about Us</a>
<a href="#" title="Menu" alt="Menu">menu</a>
</nav>
<nav class="right">
<a href="#" title="Catering" alt="Catering">catering</a>
<a href="#" title="Find Us" alt="Find Us">find us</a>
</nav>
</div>
</body>
jsiddle:如果你对所有内容都使用position:Absolute，当你调整浏览器大小时，你会发现它开始在整个页面上跳动，只需使用100%的简单高度和宽度元素，使其更加灵活。顺便说一句，在IE8或更早版本中不起作用-谢谢，现在就改变它。这就是当你试图用
position:absolute #index_container{
min-width:980px; /* !?!?!??!?!?!?!?!??!?!?!??!?!*/
}
#top_wrap{
position: absolute;
top: 0;
left: 0;
height: 20%;
width: 100%;
background: #333;
opacity: 0.8;
}
.left{
position: absolute;
left: 18%;
top: 50%;
}
.left a{
color:white;
font-size: 28px;
text-decoration: none;
font-family: 'Gafata', sans-serif;
padding: 36px;
}
.right{
position: absolute;
left: 56%;
top:50%;
}
.right a{
color:white;
font-size: 30px;
text-decoration: none;
font-family: Gafata, sans-serif;
padding: 36px;
font-weight: 400;
}
.right a:hover{
color: #333;
background-color: white;
}
.left a:hover{
color: #333;
background-color: white;
}
#logo{
position: absolute;
left:37%;
top:-9%;
height: 310px;
width: 320px;
z-index: 1;
}