html - 根据是否存在其他元素更改 div 的宽度

Question

我有两个并排的 float div。我的左边 div 占分配空间的 30%，右边 div 占 65%。但是，我的站点由 CMS 提供支持，当左侧 div 中没有内容时，它根本不会显示在浏览器中。这让我只有一个 65% 的 div 和它旁边的一些空白空间，看起来有点不漂亮。如果未显示 30% 的 div，是否有直接的 HTML/CSS2 方法指示我的 65% div 占用分配的全部空间量，或者这是否必然涉及 jQuery 和其他此类解决方案？

这是我的 JSFIDDLE

HTML

<div class="container">
    <div class="left">
        <p>Content on the left</p>
    </div>
    <div class="right">
        <p>Content on the right</p>
    </div>
</div>
<div class="container">
    <div class="right">
        <p>When there is only content in the right div, it needs to have a width value of 100%.</p>
    </div>
</div>
<div class="container">
    <div class="left">
        <p>Content on the left</p>
    </div>
    <div class="right">
        <p>Content on the right</p>
    </div>
</div>

CSS

p
    {
        padding: 10px;
    }

.container
    {
        overflow: auto;
        font-family: Arial, sans-serif; 
        color: #fff;
        margin-bottom: 20px;
    }

.container .left
    {
        float: left;
        width: 30%;
        margin-right: 5%;
        background: #555;
    }

.container .right
    {
        float: left;
        width: 65%;
        background: #c00;
    }

Answer 1

你可以尝试类似的东西:

.container .right
{
    float: left;
    min-width: 65%;
    width: auto;
    background: #c00;
}

(未测试)