0

尽管以前在这里问过这个问题，但我无法弄清楚这一点，我感到非常愚蠢。但谁能解释为什么我不能让滑块 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 -->
4

2 回答 2

5

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

.slider-container {
   clear:both;
}

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

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

于 2013-01-29T01:39:07.927 回答
1

您的图像 div 向左浮动，因此 html 中可以显示在右侧的所有内容都将被显示。

然后你的下一个 div，内容，向右浮动。它显示在相同的 y 位置（因为前一个 div 向左浮动），但锚定在屏幕的右侧。因此，下一个 div，即您的滑块，由于浮动的工作方式，位于内容 div 的左侧和图像 div 的右侧。所以滑块最终在中间。

尝试对您的内容 div 使用正确的属性和相对定位，如下所示；

#container .container_body .content {
    /*    float: right;*/
    position:relative;
    right: 0px;
    width: 355px;
}

这不是一个明确的解决方法（您必须为图像 div 添加宽度，否则我相信它可能会被覆盖），但它确实会按照您的要求强制您的滑块 div 在下方。

于 2013-01-29T01:37:37.337 回答