Question

好的，所以我有一个包含两个div的容器div，它们左右浮动。这些子div的高度取决于内部的内容（目前只是文本）。

问题是容器div的高度没有正确变化以适合孩子们;它只适合右手div而不是左手尺寸。

我已将所有div的高度设置为auto。我也尝试将较大的子div的大小设置为100％，但这似乎没有效果。

下面列出了三个相关的CSS部分（我还将提供一个指向该网站的链接，以便在需要时可以检查其余的CSS和HTML）。

#container{
/*
The container, contains the page and the footer
*/
    height: auto;   /* this is the problem child...*/
    width: 1000px;
    margin: auto;
    padding-top: 20px;
    background-color: white;
}

#content{
/*
The container, contains the content of the webpage
*/
    height: auto;
    width: 600px;   
    margin: 10px 10px 0px 10px;
    background-color: white;
    float: left;
}

#aside{
/*
The aside to be used for additional information
*/
    height: auto;
    width: 330px;   
    float: right;   
    margin: 10px 10px 0px 10px;
    padding: 5px 15px 5px;
    background-color: #E8E8E8;
    border-radius: 25px;
}

基本上我想要它，以便容器对于两个孩子的较高者来说是正确的高度（但在这种情况下，它总是我认为的右手）。但是目前它似乎总是匹配较小的那个。

Answer 1

你可以做另外一件事：
您可以在旁边标记下添加无效图像，如下所示：

<img src="nothing.png" height="271px" style="visibility: hidden;">

但我认为第一个答案是最好的。

Answer 2

根据您的#footer或#container规则，添加overflow:auto。这将恢复您在浮动的孩子之后创建的行为。

Answer 3

这里看起来像是一个clearfix的调用。尝试向内部div添加一个类，说“浮动”，并使用从两个div中删除float：left，right css。然后在floaters类中使用display：inline-block。

#container{
/*
The container, contains the page and the footer
*/
    height: auto;   /* this is the problem child...*/
    width: 1000px;
    margin: auto;
    padding-top: 20px;
    background-color: white;
}

#content{
/*
The container, contains the content of the webpage
*/
    height: auto;
    width: 600px;   
    margin: 10px 10px 0px 10px;
    background-color: white;
    /*float: left; */
}

#aside{
/*
The aside to be used for additional information
*/
    height: auto;
    width: 330px;   
   /* float: right;  */ 
    margin: 10px 10px 0px 10px;
    padding: 5px 15px 5px;
    background-color: #E8E8E8;
    border-radius: 25px;
}
.flaoters{
display:inline-block;
}

CSS div不改变高度以适应更大的子div

3 个答案: