【发布时间】：2014-03-25 07:26:19
【问题描述】：
在我的浏览器 (chrome) 上，最大化后，它看起来完全符合我的要求。一旦我重新调整浏览器的大小（即使只是一点点），导航和徽标就会移出位置，相互重叠/堆叠......我已经研究了几天并尝试了一堆不同的事情，包括用 % 定位所有元素，并为容器 div 分配最小宽度，nothing 是有帮助的。我显然错过了一些东西。 pleeeeeeeease help，我快疯了！ p.s.徽标位于左右导航之间。
<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>
还有我的 CSS，就目前而言：
#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;
}
JSFIDDLE：http://jsfiddle.net/ZaEG2/
【问题讨论】：
-
顺便说一下，
-
谢谢，现在改一下。
-
当您尝试使用
position:absolute为每个元素“钉牢”所有内容时，您会得到这样的结果。去研究一下如何在不过度使用绝对定位的情况下创建流畅的布局。 -
感谢您将我引向正确的方向。我已经阅读了更多文章，目前正在尝试设计，它似乎正在工作——只需要像我做（或不做）绝对那样掌握相对定位（和自然流动）。大约一个月前我才开始自学这些东西，我知道这不是一件容易的事，哈哈