Question

尽管以前曾在这里问过这个问题，但我觉得自己真的很愚蠢。但任何人都可以解释为什么我不能让滑块div直接坐在图像+地图和文本内容div下面（这两个应该在顶部，一个在左边，一个在右边）？显然我如何使用绝对定位是不正确的。任何建议都会很棒。 THX。

<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.

的副本

Answer 2

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

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

尝试使用正确的属性和相对定位的内容div，如此;

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

这不是一个明确的修复（你必须为你的图像div增加一个宽度，否则我相信它可能会被覆盖），但它确实会像你要求的那样强制你的滑块div。

如何强制div坐在两个不在其他div之间？

2 个答案: