将内容扩展为空div

Posted 2021-05-05

我使用Drupal，Wordpress和Bootstrap。

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

Drupal似乎在好的主题上独立完成，但我无法弄清楚如何使用Wordpress和Boostrap主题。

这应该用php，javascript还是CSS完成？如何？

谢谢。

答案

您可以使用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>

另一答案

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

以上是关于将内容扩展为空div的主要内容，如果未能解决你的问题，请参考以下文章

css 仅限图像的弹出优惠券。添加此CSS代码将隐藏优惠券的其他元素，并将自定义内容扩展为全宽。

Flutter 如何将小部件扩展为具有更多内容的更大小部件？

将矩阵扩展为块矩阵 - 索引问题

为啥jvm在推入堆栈之前将字节和短扩展为int？

将样式为 .bordered 的 SwiftUI 按钮扩展为全宽

Internet Explorer 6 和 7：当浮动元素包含向右浮动的子元素时，它们会扩展为 100% 宽度。有解决方法吗？