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

使用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;
    }

<强> DEMO

Answer 2

如果你不介意，你可以通过将你的权利div放在左边的前面来改变你的标记来实现这一点：

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

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

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

扩展div的宽度

2 个答案: