如何让div在不使用浮动的情况下填充剩余空间？

这是我的问题：我知道我可以使用float填充剩余空间，但在这种情况下，我无法做到这一点，因为当div.collapse是div.collapse时，我想div.visible留在中心隐。如果我把浮动：左，div始终保持左侧。如何让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大（因为它最终会有一个最小宽度），这一点闪光效果并不顺利。我怎么能做到这一点，所以它太大时顺利进入底部？

很多谢谢！

来源

2013-11-27 user2987763

请发表您的代码，并没有尝试解决的SO的jsfiddle +规范要求。 – brbcoding

尝试：

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.

来源

2013-11-27 17:30:10 Hiral

谢谢！那很快！ – user2987763

@ user2987763欢迎您:) – Hiral

如何让div在不使用浮动的情况下填充剩余空间？

回答

相关问题