将内容扩展为空div

Question

我使用Drupal，Wordpress和Boostrap。

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

Drupal似乎是在好的主题上自己做的，但我无法弄清楚如何使用Wordpress和Boostrap主题。

这应该用PHP，JavaScript还是CSS完成？怎么样？

感谢。

Answer 1

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

基本上，使用flex属性，您可以告诉元素与兄弟姐妹共享空间，或者在兄弟姐妹为空或被移除时消耗可用空间。

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

* { box-sizing: border-box; }

article {
    display: flex;
    border: 2px solid black;
    padding: 5px;
}

section {
    flex: 1 1 auto;  /* can grow, can shrink, start at content size */
    border: 1px dashed red;
    padding: 2px;
}

<article>
    <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
    <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</section>
</article>

<hr>

<article>
    <section>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </section>
    <section></section>
</article>

jsFiddle

Answer 2

我会使用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>

div下面......