Question

我认为自己是HTML的初学者，很抱歉，如果这是一个明智的选择。

在下面的示例中，我希望'LEFT'DIV在空时崩溃。然而，在'宽度'和'边缘'存在的情况下，它不会崩溃。如果我从样式中删除任何一个，它就会崩溃。

<html>
  <head/>
  <body>
    <div>
      <div style="float:left; width:25%; margin:40px 0 40px 0" >
        LEFT
      </div>
      <div style="float:left; margin:40px 0 40px 0">
        RIGHT
      </div>
    </div>
  </body>
</html>

如果我删除“LEFT”这个词，我知道如何让“LEFT”DIV崩溃吗？

由于

-John

Answer 1

您可以使用:empty伪类。但这意味着空洞甚至是空白 DEMO

像这样空：

<div></div>

或

<div<!-- whatever --></div>

Answer 2

您可以使用空选择器

div:empty {
  display: none;
}

这需要放在外部css或<style>标记

中

margin:40px 0 40px 0;和margin:40px 0;也是相同的

Answer 3

Css：检查div是否为空：

#left:empty {
   display: none;
}

JSFIDDLE DEMO

或者您可以使用jquery以更灵活的方式处理此检查：例如，如果你想检查div是空的还是有LEFT或其他特定内容，那么更有用

$(document).ready(function() {
    var leftcol = $("#left").html();
    alert (leftcol);
    if (leftcol == "LEFT" || leftcol == "") {
         $('#left').html('');
         $('#left').animate({ width: '0px'},'1000');        
        alert(' Left Div is empty !');
    } else {
        alert("Left Div is not empty");       
    }
});

JSFIDDLE DEMO

使用宽度和边距</div>进行空<div>折叠

3 个答案: