Question

我需要在其他div中做很多div，我似乎无法理解我的代码有什么问题，所以div不会得到div之下的高度 - 而且一切都很乱！

我的aspx代码：

<div class="tabcontent">
    <div class="tabcontent-inner">
        <div class="tabcontent-inner-left grid_20">

        </div>

        <div class="tabcontent-inner-right grid_20">

        </div>
    </div>
</div>

我的样式表css：

.tabcontent-inner {
    width: inherit;
    padding: 10px 10px 10px;
    margin-top: 10px;
    margin-bottom: 1px;
    position: relative;
    display: block;
}
.tabcontent-inner-left {
    padding: 20px 20px;
    border-left: solid 1px #ddd;
    width: 45%;
   float: left
}
.tabcontent-inner-right{
    padding: 20px 20px;
    border-right: solid 1px #ddd;
    width: 45%;
    float: right
}

基本上，我希望tabcontent-inner div获得其内部的高度。

Answer 1

这是因为在父.tabcontent-inner上你需要设置overflow：auto属性，这样才能掩盖其子女的身高

您可以在How do you keep parents of floated elements from collapsing?

找到更合适的答案

Answer 2

将此代码添加到您的CSS

.clearfix:after {
 content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}

和

更改

<div class="tabcontent-inner">

到

<div class="tabcontent-inner clearfix">

之后的css中缺少半冒号

float : left

和

float : right

如何自动调整div元素的大小以使内容适合

2 个答案: