减小窗口大小移动元素

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

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