如何在不使用float的情况下使div填充剩余空间

Question

我的问题是：我知道我可以用float填充剩余的空间，但在这种情况下，我不能这样做，因为，当div.collapse隐藏时，我想div.visible保持在中心。如果我把float:left放在左边，div总是保持在左边。

在HTML中，我放置了一个随机宽度来显示什么应该是"居中"效果。但是，灰色（图像）div具有固定的宽度。

也许我从一开始就走错了路。如果你对如何实现这一目标有更好的想法，我会非常乐意知道如何实现以及为什么实现！！

这是html:

<div class="container">
<div class="visible">
    <p>image</p>
</div>
<div class="collapse">
    <p>Text</p>
</div>

CSS

.container {
position:absolute;
background-color:#FFFF99;
width:400px;
height:100px;
text-align:center;}
.visible {
display:inline-block;
vertical-align:middle;
width:250px;  /*fixed width*/
background-color:#CCCCCC;}
.collapse {
background-color:#FF99FF;
display:inline-block;
vertical-align:middle;
width:50px; /*random width*/}

和javascript

$('.visible').click(function () {
    $('.collapse').toggle("fast");
});

此外，我还有一个问题，当div.collapse的宽度太大时（因为它最终会有一个最小的宽度），侧面有这个小闪光的效果并不平滑。当它太大的时候，我怎么能让它顺利地到达底部？

非常感谢！！！

Answer 1

尝试：

HTML:

<div class="container">
    <div class="table">
        <div class="visible">
            <p>image</p>
        </div>
        <div class="collapse">
            <p>Text</p>
        </div>
    </div>
</div>

CSS：

.table {
    display:table;
    width:80%;
    margin:0 auto;
}
.visible, .collapse {
    display:table-cell;
}

在这里打转