时间戳

首页 > 解决方案 > 将 Div 放在 Div 下并使用 Clear: both issue

css - 将 Div 放在 Div 下并使用 Clear: both issue

问题描述

我的 css 有一些问题，我不是 css 方面的佼佼者，我更像是后端开发人员，如果遇到愚蠢的问题，我深表歉意。

我有一个侧边栏菜单，如下所示：

侧边菜单图片一

我现在正试图在下面添加另一个菜单。sidemenu 容器具有 float: left 因此，当我添加另一个菜单时，它只会与当前菜单重叠。所以我研究了这个问题，并找到了添加 clear: both 到第二个菜单的解决方案。这会导致以下问题：

侧边菜单图片 2

如您所见，它现在已将我的主容器向下推，有没有办法将其保持在顶部？

如果您需要更多信息，请询问它很难共享 css 代码，因为它太多了。感谢您的任何帮助。

我也在使用引导程序，以防万一这有帮助

这是我的 HTML 和 CSS 代码：

{% include 'components/dashboard/menus/sidebar.twig' %}
<div id="page-wrapper"></div>

页面包装器是已向下移动的主页内容，如您所见，我在此代码之前包含了侧边栏。这是侧面菜​​单代码：

<!-- BEGIN SIDEBAR WRAPPER -->
<div class="page-sidebar-wrapper">
    <!-- BEGIN SIDEBAR 1 -->
    <div class="page-sidebar navbar-collapse collapse">
        <!-- BEGIN SIDEBAR MENU 1 -->
        <ul class="page-sidebar-menu" id="wifi_platform_menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
            <div id="wifi_platform_header" style="background-color: #1c2746; height: 50px; width: 100%; cursor: pointer;" class="text-center">
                <img src="{{site.uri.public}}/images/WiFi-Logo-Image.png" height="38px" width="38px" style="margin-top: 5px"/>
                <img src="{{site.uri.public}}/images/WiFi-Logo-Text.png" height="38" width="150" style="margin-top: 7px; margin-left: 5px" class="wifi-logo-text"/>
            </div>
        </ul>
        <!-- END SIDEBAR MENU 1 -->
    </div>
    <!-- END SIDEBAR 1 -->

    <!-- BEGIN SIDEBAR 2 -->
    <div class="page-sidebar navbar-collapse collapse" style="clear: both">
        <!-- BEGIN SIDEBAR MENU 2 -->
        <ul class="page-sidebar-menu" id="geo_sense_menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
            <div id="geo_sense_header" style="background-color: #1c2746; height: 50px; width: 100%; cursor: pointer;" class="text-center">
                <span id="wifi_platform_header_text" class="title bold" style="font-size: 25px; color: white; vertical-align: middle;">Geo Sense</span>
            </div>
        </ul>
        <!-- END SIDEBAR MENU 2 -->
    </div>
    <!-- END SIDEBAR 2 -->
</div>
<!-- END SIDEBAR WRAPPER 2 -->

上面是包含的代码，它显示了侧边栏。代码没有像图像那样显示列表项，我把它去掉了，因为这个例子不需要它。

正如您在第二个侧边菜单中看到的那样，我添加了“clear: both”样式，它阻止了它们重叠，但也将主页内容向下推。

这是将菜单浮动到左侧的 .page-sidebar 类：

.page-sidebar {
    width: 235px;
    float: left;
    position: relative;
    margin-right: -100%;
}

所以只是为了确认问题是我希望主页内容位于顶部而不是被推下。

标签： csstwitter-bootstrap

解决方案

你在使用引导网格吗？

如果是这样：

<div class="row">
  <div class="col-xs-4">
    //menu goes here
  </div>
  <div class="col-xs-8">
    //widgets goes here
  </div>
</div>

推荐阅读