縮小窗口大小移動元素

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/做了一些調整。