1

float: left のサイドバーがあります。そのサイドバーには、テキストが入ったボックスがあります。サイドバーのすぐ隣には、コンテンツを含むラッパーがあります。ズームインすると、すべてが適切にサイズ調整されますが、最大にズームすると、サイドバーが壊れてラッパーの中央にジャンプします。実際、私のナビゲーションバーでは、最後のアイテムも壊れてナビゲーションバーの下に表示されます...

ここでデモをチェックしてください (これが許可されていない場合は申し訳ありません): http://www.ascendvault.com

HTML

<div id="navbar">
    <div id="navbar_items">
        <div class="navbar_item"><a href="#">HOME</a></div>
        <div class="navbar_item"><a href="#">GUIDES</a></div>
        <div class="navbar_item"><a href="#">NPC</a></div>
        <div class="navbar_item"><a href="#">ENEMIES</a></div>
        <div class="navbar_item"><a href="#">ITEMS</a></div>
        <div class="navbar_item"><a href="#">SPELLS</a></div>
        <div class="navbar_item"><a href="#">COMMUNITY</a></div> <!-- this falls under #navbar on max zoom -->
    </div>
</div>  
<div id="sidebar"><!-- the sidebar appears on the content_wrapper on max zoom -->
    <div class="side_box"> 
        <div class="side_box_title"><span>VAULT FEED</span></div>
        <div class="side_box_content"></div>
    </div>
</div>
<div id="content_wrapper">
    <div id="content_wrapper_middle">
        <%content%>
    </div>
    <div id="content_wrapper_bottom">
        <div id="footer"></div>
    </div>
</div>

CSS

#navbar {
    height: 30px;
}


.navbar_item {
    float: left;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#sidebar {
    max-width: 200px;
    margin-top: 1%;
    margin-left: 1%;
    float: left;
}

#content_wrapper {
    margin-left: 230px;
    margin-right: 25px;
    margin-top: 1%;
}
4

2 に答える 2

1

navbar左フロートがオーバーフローでsidebar「キャッチ」して飛び越えるのは、オーバーフローの内容です。高navbarさの増加を処理できるようにするか、オーバーフローを非表示にする (あまり望ましくない) と、これが修正されます。

于 2013-10-10T23:57:54.733 に答える