html - 扩大div的宽度

Question

我正在研究一个部分，在该部分中我使用了两个带有浮动左侧的 div。当右 div 不可见时，我想扩大左 div 的宽度。

这就是我正在做的事情：

<style>

    body{
        font-family:Arial, Helvetica, sans-serif; 
        font-size:12px
    }
    .mainContainer{
        width:300px; 
        border:blue solid 1px; 
        overflow:hidden
    }
    .leftCont{
        float:left; 
        border:green solid 1px
    }
    .rightCont{
        float:left; 
        border:red solid 1px
    }

</style>

<div class="mainContainer">
    <div class="leftCont">
        Lorem ipsum dolor sit amet, consectetur 
    </div>
    <div class="rightCont">
        right
    </div>
</div>

我只想用 div/css 来解决这个问题。

谢谢，

Answer 1

如果您不介意，您可以通过将右侧放在div左侧之前稍微更改标记来实现：

<div class="rightCont"></div>
<div class="leftCont"></div>

然后，将你的浮动div.rightCont到右边，然后给左边的一个溢出 whitout 浮动它：

.leftCont{
  overflow: hidden;
  border: green solid 1px
}
.rightCont{
  float: right;
  border: red solid 1px
}

Answer 2

float:left不可能，请尝试使用display:table和display:table-cell

body{
        font-family:Arial, Helvetica, sans-serif; 
        font-size:12px
    }
    .mainContainer{
        width:300px; 
        overflow:hidden;
        border:1px solid blue;
        display:table;
    }
    .leftCont{        
        border:green solid 1px;
        display:table-cell;
    }
    .rightCont{
        border:red solid 1px;
        display:table-cell;
    }

演示