Question

我尝试了很多东西，但我还没有找到一个像样的解决方案。

在设计网页时，我正在使用此布局（在背景中使用不同的全长彩色条纹作为部分布局）：

<body>
<div id="wrap_banner" class="bg_banner">
<div id="wrapcentering_banner">
  <p>Here comes banner</p>
</div>
</div>
<div id="wrap_middle" class="bg_middle">
<div id="wrapcentering_middle">
  <p>text</p>
</div>
</div>
<div id="wrap_footer" class="bg_footer">
<div id="wrapcentering_footer">
    <table width="879" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="text_webmade">
    <p>
    Company</p></td>
      </tr>
    </table>
</div>
</div>
</body>

CSS包含以下内容：

#wrap_banner, #wrap_middle, #wrap_footer {
position: relative;
height: auto;
}

#wrapcentering_footer {
    position: relative;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    height: 100%;
    top: 0px;
}

#wrapcentering_middle{
        position: relative;
        width: 1000px;
        left: 50%;
        margin-left: -500px;
        height: auto;
        top: 0px;
    }


#wrapcentering_banner {
        position: relative;
        width: 1000px;
        left: 50%;
        margin-left: -500px;
        height: 200px;
        top: 0px;
    }

.bg_middle, .bg_footer, .bg_banner {
    width: 100%;
    position: relative;
      background-color:#FFF
}

问题：

我放入包含自动高度的wrapcentering_banner中的任何div都不会将页脚div向下推。根据Z-index，它将内容放在页脚div顶部的页脚区域后面，但它从不推动div。

我尝试使用自动高度和浮动左侧将一些相对div放在一个容器div中（在wrapcentering div内），但仍然没有什么可以推动div。 Offcourse绝对div也不起作用。

我必须获得显示的内容的唯一解决方案是给包装中心div一个特定的高度，并确保内容是为该高度制作的。或者我必须在wrapcentering div中使用表。桌子推动了页脚div。

由于我不是桌子的忠实粉丝，有没有办法推动这些div？

感谢。

Answer 1

您可以尝试为wrapcentering_banner div提供自动高度和浮动，并清除页脚div的浮动。这将确保页脚div不会与上部div一起浮动，并将其定位在其他div之下。

如何在这个div结构中推动div？

1 个答案: