Question

我正在尝试使我的网站的导航部分响应，但似乎无法让它以我想要的方式工作。最好的方法是查看fiddle，看看我的意思。

目前，当浏览器重新调整大小时，蓝色div会收缩，直到遇到黑色div。黑色div保持不变，滚动条出现！我真正想要做的就是当窗口重新调整大小时，当黑色和蓝色div触摸时，红色div被向左推。当窗口继续缩小并且向左推动红色div时，一旦它们触及绿色div（滚动条出现），它们将停止移动。

我已经尝试将内容转换为％，并改变了定位，但却无法解决这个问题！在我能够继续访问网站的其他部分之前，我需要学习并了解其工作原理。

非常感谢任何帮助。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fluid</title>

    <style>
        #container{position: relative; margin: 0px auto; width: 100%; max-width: 1000px; border: 2px solid blue;}
        #logo-and-nav-bar{position: relative; width: 750px; height: 175px; margin: 0px auto; border: 2px solid black;}      
        #logo {position: absolute; top: 5px; width: 200px; height: 70px; border: 2px solid green; text-align: center;}
        #nav-bar-upper, #nav-bar-lower {position: absolute; margin-left: 36%; width: 470px; border: 2px solid red;}
        #nav-bar-upper{top: 5px;}
        #nav-bar-lower{top: 65px;}
        #nav-bar-upper > ul > li, #nav-bar-lower > ul > li {display: inline; padding: 0 8px 0 8px; list-style: none;}
        #blower{position: absolute; top: 150px; left: 600px; border: 2px solid red;}
    </style>
</head>

<body>
<div id="container">

<div id="logo-and-nav-bar">
    <div id="logo">.jpeg Logo<br />In Here!</div>

        <div id="nav-bar-upper">
          <ul>
              <li><a href="#">Item A</a></li>
              <li><a href="#">Item B</a></li>
              <li><a href="#">Item C</a></li>
              <li><a href="#">Item D</a></li>
              <li><a href="#">Item E</a></li>
              <li><a href="#">Item F</a></li>
          </ul>
        </div>

        <div id="nav-bar-lower">
            <ul>
              <li><a href="#">Item G</a></li>
              <li><a href="#">Item H</a></li>
              <li><a href="#">Item I</a></li>
              <li><a href="#">Item J</a></li>
              <li><a href="#">Item K</a></li>
              <li><a href="#">Item L</a></li>
          </ul>
        </div>
       <div id="blower">Tel: 1234 56789</div> 
</div>  

</div>
</body>
</html>

Answer 1

而不是

#logo-and-nav-bar {
    width: 750px;
}
#nav-bar-upper, #nav-bar-lower {
    margin-left: 36%;
}

使用

#logo-and-nav-bar{
    width: 750px;
    min-width: 680px;
    max-width: 100%;
}
#nav-bar-upper, #nav-bar-lower {
    right: 0;
}

Demo

CSS流体导航

1 个答案: