Question

这是我的问题：我知道我可以用浮动填充剩余的空间，但在那种情况下，我不能这样做，因为，我想div.visible留在div.collapse的中心是隐藏的。如果我把浮动：左，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;
}

Fiddle here.

如何使div不填充浮动填充剩余空间？

1 个答案: