Question

是否有CSS或纯HTML解决方案让div只有在内容时才可见？我有这个JSP代码：

<div class="message-panel panel-alert">
  <span class="label-warning">
     <span class="warning-sign"></span>
  </span>
 <c:if test="${condition1}">
   <p> Condition 1 is true </p>
  </c:if>
  <c:if test="${condition2}">
    <p> Condition 2i s true </p>
 </c:if>
</div>

如果其中任何一个条件成立，我确实想要在警告面板上显示我的警告标志，但如果两个都不成立，我不希望这个div出现。我能想到的两个解决方案是用一个包罗万象的if语句来包围整个事物，或者在javascript中以编程方式修改div的visible属性。但是，我想知道是否有办法说＆＃34;嘿，div，如果你没有任何东西就离开＆＃34;。

Answer 1

使用:empty伪选择器：

div.panel-alert:empty {
    display: none;
}

Answer 2

您可以尝试创建一个名为hidden的类。当两个文本都为空（使用两个ifs）然后在css中定义<div class="message-panel panel-alert">或者如您所述使用一些javascript（{3}}

时，将其添加到.hidden {display:none;}

HTML - 仅在有文本时显示div

2 个答案: