DIV 不使用 float:right 向右浮动

Question

我正在使用 OpenLayers 3 制作交互式游戏地图。我想左右两边都有侧板，里面都有两个容器，但是地图一定要能下 那些容器。当它进入两个容器的边缘时，使其在视觉上更令人愉悦。为此，我使用了 z-index。

我在左侧面板上有float: left;，在右侧面板上有float:right;，但它们似乎没有区别。 我在顶部容器的标题中包含了 LEFT 和 RIGHT，所以我知道它们是否正确浮动。 它们不是，因为右侧没有任何东西，而右侧在左侧之上。

HTML

          <div id="map" class="map"><!--Map DIV, contains all of the webpage content-->

                <!--Left SideBar-->
                <div class="sidebar-left">
                    <div class="container-top">
                        <h3>Miscreated interactive map LEFT</h3>
                        <p>You can use this map to find your location and navigate through the wasteland of Miscreated.
                            Also you can make your own waypoints on the map and <b>share them with friends</b>! </p>
                        <h4>Sign in for markers &middot <a href="#">Make new Group?</a> </h4>
                        <form>
                            <input type="text" name="groupname" placeholder="Group name" class="glowing-border" style="height: 20px; width: 48%;">
                            <input type="text" name="secret" placeholder="Secret" class="glowing-border" style="height: 20px; width: 48%;">
                        </form>
                    </div>

                    <div class="container-bottom">
                    map version: 0.1 <i>game version: .40</i>
                        <h3>Interactive Map Development</h3>
                        <h3>Upcoming changes to interactive map</h3>
                        <ul>
                            <li>User placed markers/waypoints</li>
                            <li>Login/Clan system</li>
                            <li>More resposive design</li>
                        </ul>
                        <p>I spend a lot of time developing this map, any feedback or suggestions for the development of this project are more then welcome. <a href="" target="about_blank"><b>Visit discussion on forums</b></a></p>
                    </div>  
                </div>

                <!--Right SideBar-->
                <div class="sidebar-right">
                    <div class="container-top">
                        <h3>Miscreated interactive map RIGHT</h3>
                        <p>You can use this map to find your location and navigate through the wasteland of Miscreated.
                            Also you can make your own waypoints on the map and <b>share them with friends</b>! </p>
                        <h4>Sign in for markers &middot <a href="#">Make new Group?</a> </h4>
                        <form>
                            <input type="text" name="groupname" placeholder="Group name" class="glowing-border" style="height: 20px; width: 48%;">
                            <input type="text" name="secret" placeholder="Secret" class="glowing-border" style="height: 20px; width: 48%;">
                        </form>
                    </div>

                    <div class="container-bottom">
                    map version: 0.1 <i>game version: .40</i>
                        <h3>Interactive Map Development</h3>
                        <h3>Upcoming changes to interactive map</h3>
                        <ul>
                            <li>User placed markers/waypoints</li>
                            <li>Login/Clan system</li>
                            <li>More resposive design</li>
                        </ul>
                        <p>I spend a lot of time developing this map, any feedback or suggestions for the development of this project are more then welcome. <a href="" target="about_blank"><b>Visit discussion on forums</b></a></p>
                    </div>
                </div>
            </div>

CSS

.map {
    position: relative;

    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;

    min-height: 100%;
    height: 100%;
}

.sidebar-left {
    position: absolute;
    z-index: 3;
    float: left;

    width: 25%;
}

.sidebar-right {
    position: absolute;
    z-index: 3;
    float: right;

    float:right;
    width: 25%;
}

.container-top {
    background-color: #f2f2f2;

    padding: 1% 1% 1% 1%;
    margin: 2% 2% 2% 2%;

    outline: none;
    border-style: solid;
    border-width: 3px;
    border-radius: 2px;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

.container-bottom {
    background-color: #f2f2f2;

    padding: 1% 1% 1% 1%;
    margin: 5% 2% 2% 2%;

    outline: none;
    border-style: solid;
    border-width: 3px;
    border-radius: 2px;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

Answer 1

好吧，这变得很奇怪，但我又解决了自己的问题。我没有使用浮点数，而是使用了 left 属性，因为我知道我的侧边栏是 25% 宽，我只需要将它向左移动 75%。

Answer 2

你可以试试clear: both; 属性。但是，如果您为此设置了一个 jsfiddle，我可以进一步查看。这可能是比使用绝对定位更好的解决方案。但是，如果 absolute 适合您，那很好，但我会尝试使用上述 clear 属性。