Javascript 使内容扩展为空div

我使用Drupal、Wordpress和Boostrap

我正在寻找当兄弟div为空时，div在右侧水平扩展的最佳解决方案

Drupal似乎在好的主题上独立完成了这项工作，但我不知道如何使用Wordpress和Boostrap主题

这应该用PHP、JavaScript还是CSS来完成？怎么做

谢谢

---

您可以使用CSS flexbox构建此布局

基本上，使用flex属性，您可以告诉元素与同级共享空间，或者在同级为空或被删除时消耗可用空间

在下面的示例中，第一个版本有两个包含内容的元素。在第二个版本中，一个元素为空。其他一切都一样

*{框大小：边框框；}
文章{
显示器：flex；
边框：2件纯黑；
填充物：5px；
}
部分{
flex:1 1自动；/*可以增长，可以收缩，从内容大小开始*/
边框：1px红色虚线；
填充：2px；
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

我会使用Javascript，这样做只是为了一个小补丁

<div>
<div id='item1'>Stuff Here</div>
<div id='item2'>Stuff Here</div>
</div>
<script>
    var sibling = document.getElementById("item1").nextSibling;
    if (sibling.innerHTML.length === 0) {
            sibling.parentNode.removeChild(sibling);
            document.getElementById("item1").style.width = "100%";
    }
</script>

这里的东西
这里的东西
var sibling=document.getElementById（“item1”）.nextSibling；
if（sibling.innerHTML.length==0）{
同级.parentNode.removeChild（同级）；
document.getElementById（“item1”）.style.width=“100%”；
}

在潜水舱下面