Question

我有一些问题，我的css，我不是最好的css我更像是一个后端开发人员所以很抱歉，如果这是愚蠢的。

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

我现在正在尝试添加另一个菜单。 sidemenu容器有float：left所以当我添加另一个菜单时它只是重叠当前的菜单。所以我研究了这个问题，并提出了解决方案，即添加清晰：第二个菜单。这会导致以下问题：

正如你所看到的那样，它现在推动了我的主容器，有没有办法让它保持在顶部？

如果您需要更多信息，请问它很难分享css代码，因为它有很多。谢谢你的帮助。

我也在使用bootstrap，只是这有帮助

这是我的HTML和CSS代码：

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

页面包装器是已向下移动的主页面内容，因为您可以看到我在此代码之前包含了侧边栏。这是sidemenu代码：

<!-- 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 -->

以上是包含的代码，显示侧边栏。代码没有像图像一样显示列表项，我把它拿出来，因为这个例子不需要它。

正如你在第二个侧面菜单中看到的那样，我添加了风格＆＃34; clear：both＆＃34;这阻止了他们重叠，但也推倒了主页内容。

这是将页面浮动到左侧的.page-sidebar类：

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

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

Answer 1

您使用的是自举网格吗？

如果是这样的话：

/*
 @import "froala_editor.min.css";
 @import "froala_style.min.css";
 @import "font-awesome-sprockets";
 @import "font-awesome";
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome    
 */
// *= require trix   
@import "bulma";
@import "functions";
@import "jobs";
@import "stripe";
@import "font-awesome";
@import 'plugins/char_counter.min.css';
@import 'plugins/code_view.min.css';
@import 'plugins/colors.min.css';
@import 'plugins/emoticons.min.css';
@import 'plugins/file.min.css';
@import 'plugins/fullscreen.min.css';
@import 'plugins/help.min.css';
@import 'plugins/image_manager.min.css';
@import 'plugins/image.min.css';
@import 'plugins/line_breaker.min.css';
@import 'plugins/quick_insert.min.css';
@import 'plugins/special_characters.min.css';
@import 'plugins/table.min.css';
@import 'plugins/video.min.css';

.notification {
  border-radius: 0;
}

.notification:not(:last-child) {
  margin-bottom: 0;
}

.hint {
    font-size: small;
}

.tag {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 9px !important;
}
.has-bg-img {
  background-image:url('<%= asset_path("ad.jpg") %>');
  background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
height:100%;
}

将Div放在Div下以及使用Clear：两个问题

1 个答案: