html - 减小窗口大小会移动元素

Question

你好厉害的程序员，

一段时间以来，我一直在为 CSS 苦苦挣扎。调整窗口大小时出现问题，我的一些 div 开始向下折叠页面。 (如图)

之前:

before http://411metrics.com/pics/before.PNG

之后:

before http://411metrics.com/pics/after.PNG

我已经尝试将各种 div 的最小宽度设置为 100%，还尝试将溢出设置为隐藏。

有人对如何解决这个问题有任何建议吗？

我的 HTML:

<div id="navigation">
    <div id="branding-logo"><img src="/Portal/images/sharktek-logo.png" width="35" height="35"></div>
    <div id="branding">Sharktek Tracking</div>
    <div id="link-wrap">
        <div id="active-nav"><a href="/Portal/dashboard">Dashboard</a></div>
        <a href="/Portal/statistic">Reports</a>
        <a href="/Portal/record">Call Logs</a>
        <a href="/Portal/manage">Manage Campaigns</a>';         
    </div>
    <div id="nav-user">
        Welcome<br>
        <a href="/Portal/account">Account Settings</a>
        <a href="/Portal/auth/logout">Logout</a>
    </div>
</div>
<div id="nav-accent"></div>

我的 CSS:

#navigation {
    z-index:3;
    position: fixed;
    top: 0;
    width: 100%;
    min-width:100%;
    color: #ffffff;
    height: 60px;
    text-align: center;
    /* Adds the transparent background */
    background-color: rgba(22, 29, 37,1);
    color: rgba(1, 172, 237, 1);
}


#navigation a {
    float:left;
    font-size: 14px;
    padding: 25px 25px 0 25px;
    color: white;
    text-decoration: none;
}

#link-wrap {
    float: left;
    overflow: hidden;
    margin-left: 15%;
}

#active-nav{
    z-index: 2;
    float:left;
    color:white;
    height: 60px;
    background: -webkit-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#346c83, rgba(1, 172, 237, 1)); /* Standard syntax */
}

#active-nav a:hover {
    color:white;
}

#navigation a:hover {
    color: grey;
} 

#branding-logo {
    margin-top: 15px;
    margin-left: 10px;
    float: left;
}

#branding{
    margin-top: 20px;
    margin-left: 10px;
    font-size:1.4em;
    color: white;
    float: left;
    padding: 0px;
}


#nav-accent {
    z-index:2;
    position: fixed;
    top: 60px;
    width: 100%;
    color: #ffffff;
    height: 2px;
    padding-top: 1px;
    /* Adds shadow to the bottom of the bar */
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
    /* Adds the transparent background */
    background-color: rgba(1, 172, 237, 0.95);
    color: rgba(1, 172, 237, 1);
}
#nav-user {
    color: white;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 15px 30px 0 0;
    font-size: .8em;
    float:right;
}

#nav-user a{
    margin: 0;
    padding: 0 0 0 10px;
    font-size:.8em;
}

Answer 1

在我开始理解和应用绝对定位之前，我也遇到过类似的问题。即相对于您所在的 div 进行定位。

对于绝对定位，父 div 必须设置为相对定位，然后您可以将内部元素固定到您喜欢的任何一侧，而无需浏览器接管流控制。

例如在你的情况下，......

#link-wrap {
    position: absolute;
    width: 500px;
    /* ... the rest */
}

...您的导航链接将停止在整个页面上跳跃。我在这个 fiddle 中做了一些调整 http://jsfiddle.net/xb9cdu34/2/ .