如何强制 div 坐在其他两个不在中间的 div 下方？

Question

尽管之前在这里问过这个问题，但我无法弄清楚这一点，我感到非常愚蠢。但是谁能解释为什么我不能让滑块 div 直接位于图像 + 地图和文本内容 div 的下方（这两个应该在顶部，一个在左边，一个在右边）？显然我如何使用绝对定位是不正确的。任何建议都会很棒。谢谢。

<style> 

#container .container_body .images {
    float: left;
}

#container .container_body .content {
    float: right;
    width: 355px;
}

#container .container_body {
    margin-bottom: 35px;
    background-color: pink;
    font-size: 22px;
}

.slider-container { 
    background-color: red;
    /*position: absolute;*/
}

.content {
    background-color: blue;
}

.images {
    background-color: green;
    /*position: absolute;*/
}

</style> <!-- /.style -->


<!-- container ALL -->
<div id="container">

  <!-- container BODY -->
  <div class="container_body">
    <p>container body here.</p>

    <!-- IMAGES -->
    <div class="images">
        <p>images here.</p>
    </div> <!-- /.images -->

    <!-- TEXT CONTENT -->
    <div class="content" style="width: 366px;">
          <p>text content here.</p>

          <!-- map -->
        <div class="map">
            <p>map media here.</p>
        </div><!-- /.map -->

    </div><!-- /.content -->
  </div> <!-- /.container_body -->

  <div class="slider-container"><!-- slider -->
     <p>slider here.</p>
  </div><!-- /.slider -->

</div><!-- /#container -->

Answer 1

当您有浮动元素时，您必须将clear属性应用于要位于浮动元素下方的元素。如，

.slider-container {
   clear:both;
}

的值both只是表示移动元件向下清除既浮动左和右元素。在上面的示例中，这应该涵盖float:left;和float:right;声明。

通过将上述样式应用于您现有的标记，滑块将按预期位于图像和文本下方。这是我的jsfiddle的副本。