使内容扩展为空 div答案

【问题标题】：Make content expand into empty div使内容扩展为空 div
【发布时间】：2016-07-09 03:45:40
【问题描述】：

我使用 Drupal、Wordpress 和 Boostrap。

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

Drupal 似乎可以在好的主题上自行完成，但我不知道如何使用 Wordpress 和 Boostrap 主题来完成。

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

谢谢。

【问题讨论】：

标签： javascript php css drupal themes

【解决方案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

【讨论】：

【解决方案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 下...

【讨论】：