1

我有一个带有浮动的侧边栏：左侧，在那个侧边栏中是一个带有一些文本的框。侧边栏旁边是一个包含内容的包装器。如果我放大所有东西的大小，但如果我将它放大到最大，侧边栏会中断并跳转到包装器的中间。实际上，使用我的导航栏，最后一项也会中断并出现在导航栏下......

在此处查看演示（如果不允许这样做，请见谅）：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 回答
0

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

于 2013-10-11T00:08:59.950 回答