css - 由于已经给出了最小高度，因此盒子不会明智地扩展高度

Question

我的类(class)是这样的，在给定最小高度时动态扩展 div。我可以知道这有什么问题吗？

.gil_Individual_FormPanelBg
{   
    width:500px;
    min-height:50px !Important;
    float:none;
    margin:5px auto;
    padding:4px;
    background-color:#f7f7f7;
    border:Solid 1px #e6e6e6;
    -border-radius:4px 4px 4px 4px;
    -Moz-border-radius:4px 4px 4px 4px;
    -webkit-border-radius:4px 4px 4px 4px;
}

Answer 1

Shabir，看起来好像你有一大堆 float:left，但实际上并不需要。

试试这个更新的 CSS:

.gil_Individual_FormPanelBg
{    
    width:500px;
    min-height:50px;
    margin:5px auto;
    padding:4px;
    background-color:#f7f7f7;
    border:Solid 1px #e6e6e6;
    -border-radius:4px 4px 4px 4px;
    -Moz-border-radius:4px 4px 4px 4px;
    -webkit-border-radius:4px 4px 4px 4px;
}

.gil_Individual_FormWrapper
{
    position:relative;
    height:auto;
    width:100%;    
    margin:2px auto;
    padding:0px;
}

.gil_Individual_FormRow
{
    position:relative;
    width:100%;
    min-height:20px !Important;
    margin:3px 0 0 0;
    padding:0px;
}

.gil_Individual_FormLable
{
    position:relative;
    width:150px;
    height:15px;
    float:left;
    margin:0px;
    padding:0px;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    font-size:11px;
    font-weight:Normal;
    color:#3B5998;
    text-align:left;
    text-decoration:none;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

.gil_Individual_FormCtrl
{
    position:relative;
    width:350px;
    min-height:15px !Important;
    float:left;
    margin:0px;
    padding:0px;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
    font-size:11px;
    font-weight:Normal;
    color:#333;
    text-align:left;
    text-decoration:none;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

HTML 保持不变。如果您要添加类 float。考虑创建一个明确的类放置在 float DIV 之后。

像这样分类:

.clear{
    clear:both;
    margin:0;
    padding:0;
    height:1px;
}

查看您发布的链接后，看起来您的构建可能过于复杂了，但希望它现在可以按照您希望的方式工作。

丹