DIV不会浮动到右边：右

Question

我正在使用OpenLayers 3来制作互动游戏地图。我希望在左侧和右侧都有侧面板，它们内部都有两个容器，但地图必须能够下< / em>那些容器。当它进入两个容器的边缘时，使其更加视觉上令人愉悦。我使用了 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

好吧这很奇怪，但我又解决了自己的问题。我没有使用浮动，而是使用左侧属性，因为我知道我的侧边栏宽度为25％，我只需将其移动75％左右。

Answer 2

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