Question

我正在努力做一些简单的事情，而且它让我感到沮丧。我有一些看起来像这样的HTML：

    <div id="div_table">
    <div class="div_table_row">
        <div class="div_row_label">
            Your Name :
        </div>
        <div class="div_row_field">
            <asp:TextBox 
                ID="tbCustomerName" 
                Width="95%" 
                MaxLength="80" 
                runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator 
                ID="rqCustomerName" 
                runat="server" 
                ControlToValidate="tbCustomerName"
                ErrorMessage="Required" 
                SetFocusOnError="true" 
                CssClass="ctl_err" 
                Text="Required"></asp:RequiredFieldValidator>
        </div>
    </div>
    <div class="div_table_row">
            <div class="div_row_label">
                Your Company :
            </div>
            <div class="div_row_field">
                <asp:TextBox
                    ID="tbCompany"
                    Width="95%"
                    MaxLength="80"
                    runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator
                    ID="rqCompany"
                    runat="server"
                    ControlToValidate="tbCompany"
                    ErrorMessage="Required"
                    SetFocusOnError="true"
                    CssClass="ctl_err"
                    Text="Required"></asp:RequiredFieldValidator>
            </div>
        </div>
    </div>

它使用带有以下代码的样式表，用于HTML中的元素：

    #div_table{
        overflow:hidden;
        width:60%;
        margin-left:auto;
        margin-right:auto;
        padding-left:5px;
        padding-right:5px;
        clear:both;
    }

    .div_table_row{
        width:100%;
        clear:both;
    }

    .div_row_label{
        width:50%;
        text-align:right;
        background-color:#cccccc;
        float:left;
        height:100%;
    }

    .div_row_field{
        width:50%;
        text-align:left;
        background-color:#000000;
        float:right;
        height:100%;
    }

所以，问题在于，当我浏览页面时，div div_row_label的灰色背景颜色仅显示在文本下方而不是填充整个div，尽管在div div_row_field中，它显示黑色背景就好了。这适用于Chrome和Edge。我做错了什么？

Answer 1

.div_row_label浮动，因此它没有“官方”高度。要解决此问题，请将overflow:auto;添加到其容器中，例如：

.div_table_row {
  overflow:auto;
}

Answer 2

一种可能的解决方法是设置.div_table_row的背景颜色，而不是.div_row_label。由于.div_row_field的背景颜色正在设置，这仍然可以为您提供您正在寻找的结果。

DIV背景不能正确填充CSS颜色

2 个答案: