Question

好的，所以我有一个内部div，旨在包含文本，图像等在这种情况下，图像浮动内部div是一个页脚，这是我的问题。无论我尝试什么，内部div都不会在图像周围扩展，因此，页脚不会位于图像下方。

这个例子可以在这里看到：http://baradineholdings.com.au/about2.php

#internal
{
    width: 960px;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
}

#row {
    min-width: 480px;
    display: block;
}

#movers-row {
    margin: -406px 0 0 121px;
}

#movers-row div {
    width: 49.9%;
    float: left;
}

#movers-row div img {
    float: right;
} 

#footer {
    width: 960px;
    height: 98px;
    border-top: 1px outset #ccc;
    border-bottom: 1px solid #ccc;
    border: 1px solid #ccc;
    background-color: white;
}

有人可能已经回答了，但我似乎没有使用正确的术语进行搜索，所以我们将非常感谢任何帮助。

Answer 1

更改此ID的CSS ...

#footer {
 width: 960px;
 height: 98px;
 border-top: 1px outset #ccc;
 border-bottom: 1px solid #ccc;
 border: 1px solid #ccc;
 background-color: white;
 position:relative;
 float:left;
}

更新：更改此ID的css ..适用于Linux上的Chrome ..所以..在IE9上测试过它

#movers-row {
 margin: -406px 0 0 121px;
 height: auto;
 overflow: hidden;
}

Answer 2

您想要将 clearfix 添加到该容器，以便它扩展到与其子容器相同的高度。最好作为css类选择器完成，这样你就可以在不同的元素上重用它。

从html5 Boilerplate尝试这个：http://html5boilerplate.com/html5boilerplate-site/built/en_US/docs/css/#clearfix-

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; clear: both;}

容器div和溢出问题

2 个答案: