css - 两个div自适应宽度

Question

我正在尝试这样做

<div>
    <div style="width:50%;"> first div </div>
    <div style="width:50%;"> second div </div>
</div>

有时不会动态显示第一个或第二个 div。当第一个 div 不显示时，我需要第二个假设宽度为 100%，反之亦然。我可以只用css做到这一点吗？最小重量或最大宽度或类似的东西？

Answer 1

您可以使用:only-child伪类

.childDiv
{
    width:50%;
}
.childDiv:only-child
{
    width:100%;
}

HTML

<div>
    <div class="childDiv'> first div </div>
    <div class="childDiv'> second div </div>
</div>

Answer 2

尝试使用自动边距 CSS 属性：

.myClass
{
    margin:0px auto;
    width:50 //You can set this to whatever or take it out
}

并添加到 HTML

<div>
    <div class="myClass'> first div </div>
    <div class="myClass'> second div </div>
</div>