html - 将 CSS 应用于空值

Question

我有以下CSS：

.ReadOnlySettingsListField {
    width:150px;
    float: left;
    padding: 2px;
    background-color: #eeeeee;
}

我的html如下：

<table>
     <tr>
         <td>
             <div id="value1" class="ReadOnlySettingsListField ">{{ value1 }}</div>
             <div id="value2" class="ReadOnlySettingsListField ">&nbsp;</div>
             <div id="value3" class="ReadOnlySettingsListField ">{{ value3 }}</div>          
         </td>
     </tr>
 </table>

我的问题是每当值：value1 或 value3 为空时，div 看起来不像它应该的那样，即背景颜色仅在顶部显示为一条细细的条带。如果 value1 或 value3 有任何文本，那么它看起来像预期的那样（150 宽，背景颜色=eeeeee）

如何使 css 也适用于“空”值？

Answer 1

尝试像这样在你的css类中使用min-width和属性min-height

.ReadOnlySettingsListField 
{
 width:150px; 
 float: left; 
 padding: 2px; 
 background-color: #eeeeee;
 min-width:150px;
 min-height:100px;

}