Question

我有一个带浮动的侧边栏：左边，在侧边栏中是一个包含一些文字的框。侧边栏旁边是一个包含内容的包装器。如果我放大所有尺寸都很好，但是如果我将它缩放到最大值，侧边栏会断开并跳到包装器的中间。实际上，使用我的导航栏，最后一项也会断开并显示在导航栏下...

在这里查看演示（对不起，如果不允许）：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%;
}

Answer 1

navbar溢出的内容导致左浮动sidebar“抓住”溢出并跳过。使navbar能够处理增加的高度，或隐藏溢出（不太理想），将解决这个问题。

Answer 2

你的问题在于测量。您在%中使用了一些边距，px中的边距和px中的宽度。在某些时候，1％+ 200px将超过你#content_wrapper的230px的余量。为什么没有宽度的块？如果您想要一个自适应网站，为什么不让它们全部使用%？

浮动Div突破缩放

2 个答案: