空时将项目移动到左侧css html答案

【问题标题】：Move items when empty to the left css html空时将项目移动到左侧css html
【发布时间】：2020-06-23 17:38:47
【问题描述】：

我需要帮助，我正在使用 div 和 inline-block 制作容器，但是当容器的内容为空时，我需要向左移动元素。这显示在运行代码中

PD::.在运行代码中有溢出，但在我的网站上没有发生。对不起，这是我第一次来 stackoverflow.com

.polaroid1 { 
        width: 100%;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 15px;
    border-radius: 8px;
    display: inline-block;
    vertical-align: top;
       
     }
.kincomposerwoo {
        height: 490px;
     }

@media screen and (min-width: 490px) {
    .polaroid1{
        width: 48%;

    }
    .kincomposerwoo {
        height: 490px;
    }
}

@media screen and (min-width: 780px) {
    .polaroid1{
        width: 33%; 
    }
    .kincomposerwoo {
        height: 530px;
    }
}

<div class="kincomposerwoo polaroid1"></div>

<a id="link" href="https://www.merotaco.com/cupon1/"><div class="polaroid1"><img  src=https://www.merotaco.com/wp-content/uploads/2020/05/Cupon-Repertura-Merotaco.com_.jpg" alt="" class="wp-image-2648" width="auto" height="auto" /><img style="float: right; margin: 12px 15px 15px 0px;" src="https://www.merotaco.com/wp-content/uploads/2020/05/612890.png" alt="" width="30" height="30"/><div class="container">REAPERTURA COUPÓN
<br>Expira : 2020-05-11

  </div>
</div>
</a>

【问题讨论】：

标签： javascript html css media-queries

【解决方案1】：

您可以使用:empty选择器来检查内容是否为空。

.container:empty {
  /* Your CSS goes here */
}

【讨论】：

我已经提供了空的，但它并没有删除空框，我需要将那个空框替换为下一个。
.container:empty{ display:none; }

【解决方案2】：

你可以使用 css ：

.kincomposerwoo:empty {
   display:none
}

或者您可以使用 Javascript 通过检查元素（节点）子级来删除它。

const removeWhenEmpty = (element) => {
  for (let el of element) {
    !el.hasChildNodes() && el.remove();
  }
};

const leftElement = document.getElementsByClassName("kincomposerwoo");
removeWhenEmpty(leftElement);

【讨论】：