Question

我有2个div并排坐着。我将用数据库中的文本填充这两个div。现在，LHS上的div可能有也可能没有文本。另一方面RHS的div里面总会有文字。我的问题是;我如何以这样的方式设计RHS div：当LHS div中没有文本时，它将动态增长到100％，如果LHS div中有文本，那么它将调整为原始宽度50％。 / p>

我的div看起来像：

<div id="left" style="float:right;width:50%;background-color:yellow;">
    Left content
</div>
<div id="right" style="float:right;width:50%;background-color:red;">
    Right content
</div>

Answer 1

您可以使用CSS选择器执行此操作：

<div id="left">Left content</div>
<div id="right">Right content</div>

CSS

#left, #right {
    float:left;
    display:block;
    background:#eee;
    width:50%;
}

#left:empty {
    width:0;
}

#left:empty + #right {
    width:100%;
}

<强> check this fiddle

请注意：要让:empty工作，你的div中不得有任何东西，甚至是空格。

如何使div宽度灵活？

1 个答案: