Question

Hello awesome程序员，

我已经在CSS上苦苦挣扎了一段时间了。调整窗口大小时出现问题，我的一些div开始在页面上崩溃。（如图所示）

在：

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

后：

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

我尝试在各种div上将min-width设置为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设置为相对定位，然后将内部元素固定到您喜欢的任何一侧，而无需浏览器接管流控制。

e.g。在你的情况下，与......

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

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

减小窗口大小会移动元素

1 个答案: