如何讓div在不使用浮動的情況下填充剩餘空間？

Question

這是我的問題：我知道我可以使用float填充剩餘空間，但在這種情況下，我無法做到這一點，因爲當div.collapse是div.collapse時，我想div.visible留在中心隱。如果我把浮動：左，div始終保持左側。

在HTML中，我放了一個隨機寬度來顯示應該是「居中」效果。但是，灰色（Image）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.c大（因爲它最終會有一個最小寬度），這一點閃光效果並不順利。我怎麼能做到這一點，所以它太大時順利進入底部？

很多謝謝！

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

Fiddle here.