Question

在我的浏览器（chrome）上，最大化，它看起来就像我想要的那样。一旦我重新调整浏览器的大小（即使只是一点点），导航和徽标就会移动到位，重叠/堆叠在一起......我已经研究了几天了，试了一堆不同的东西，包括用％定位所有元素，并为容器div分配最小宽度和没有是有帮助的。我显然错过了一些东西。 pleeeeeeeease帮助，我要去克雷！附：徽标位于左侧和左侧之间。右导航。

<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/

Answer 1

如果你正在使用Positon：绝对绝对一切，当你调整浏览器大小时，你会发现它开始在整个页面上跳舞，只需使用100％的简单高度和宽度元素，使其更灵活

在浏览器重新调整大小时移动的元素，没有任何帮助

1 个答案: