Question

我希望在名为“contactCopy”的容器DIV底部的DIV中有一个名为“bottomGrey”的实心灰色条。

<div id="contactCopy">

    <div id="contactLeft">
            CONTACT
    </div>

    <div id="contactRight">
        <iframe src="https://www.google.com/maps/embed?pb=!1m5!3m3!1m2!1s0x87e2349d140afa9f%3A0x9b41dc0528aa1d72!2s131+W+2nd+St+%23400%2C+Davenport%2C+IA+52801!5e0!3m2!1sen!2sus!4v1389913120076" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
    </div>  

    <div id="bottomGrey"></div>

    <div class="clr"></div> 
</div>

CSS

#contactLeft{
    float:left;
    width:30%;
    padding:5%;
}

#contactRight{
    float:left;
    width:640px;
    height:480px;
    padding-top:5%;
    padding-bottom:5%;
    margin-left:5%;
  position:relative;
}

#contactCopy{
    position:relative;
}

#bottomGrey{
    position:absolute;
    bottom:0;
    height:10%;
    width:100%;
}

但它根本不显示，即使我删除了“contactLeft”和“contactRight”DIVS。这应该很简单但是：（

直播网站：http://estes.nbson.com/contact.html

Answer 1

显示：它只是一个白色的背景，没有内容。添加背景颜色，你会明白我的意思。

Answer 2

只需将其添加到您的CSS：

#contactCopy:after {
    display: block;
    height: 10px;
    width:100%;
    background-color: grey;
    content: "";
    clear: both;
}

通过它，您可以从HTML结构中删除<div id="bottomGrey"></div>和<div class="clr"></div>，并获得灰色边框并同时清除。

Answer 3

给它背景色，100％宽度和一些内容。还假设clr类是一个明确的修复实现。把它作为底部的灰色div。因此，联系人副本将具有适当的高度，并且底部灰色将位于两个浮动的div之下。不需要绝对的位置。

将div放在另一个div的底部

3 个答案: