html - 引导导航栏 2 div 一个在另一个之下

问题描述

我有下面的代码，我希望 div1 高于 div2。我已经尝试使用 css 来完成它，如下所示，但我无法正确处理，并且 div 彼此相邻。既然我让他们两个都吃饱了，他们width:100%;不float:right;应该在彼此之下吗？

另外，我读到clear:both;它应该可以解决问题，但没有！

对此有什么想法吗？

谢谢

编辑： 我正在使用 Bootstrap 4.0.0。

<body>
    <header>
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light top">
                <img src="images.png" alt="image" class="imageClass">
                <div class="div1 ">
                    <a href="#" id="id1">somthinghere</a>
                    <a href="#" class="active">link</a>
                    <a href="#" class="">link2</a>
                </div>
                <div class="collapse navbar-collapse div2" id="navbarsExampleDefault">
                    <ul class="navbar-nav ml-lg">
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link11</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link111</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">link1111</a>
                        </li>
                    </ul>                       
                </div>
            </nav>
        </div>
    </header>
</body>

CSS：

header{
    position:absolute;
    z-index: 10;
    width: 100%;
}

.div2{
    clear:both;
    width: 100%;
    float:right;        
}

.div1{
    width: 100%; 
    float:right;
}

标签： htmlcssbootstrap-4

html - 引导导航栏 2 div 一个在另一个之下

问题描述

解决方案

推荐阅读