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;

}