Question

我有两个并排的div。它们都可以通过jquery关闭。当它们都是可见的时，它们具有固定的宽度，但是当一个关闭时，我希望剩余的div扩展以占用封闭的div用来占用的宽度。有没有办法只使用CSS（除了关闭按钮），或者我是否必须使用javascript？

Answer 1

我用CSS解决此问题的唯一方法是将类添加到包含元素：

<div id="container" class="left|right|both">
    <div class="left"></div>
    <div class="right"></div>
</div>

根据父类的内容设置内容的样式。如果left是类，则为第一个div提供不受限制的宽度，并隐藏第二个div。 right和第二div也是如此。如果父级为both，则两个div都为50％。

您需要做的所有JavaScript都是处理当前应用于容器的类。

Answer 2

你需要至少为此写一行javascript然后你可以使用css来实现效果。

使用jquery，只要单击关闭，就可以将类切换到div的父级。找到单击关闭按钮的jquery代码并添加

$("#parent").toggle("classname");

使用css，如

#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }

Answer 3

这样的事情有用吗？

HTML：

<div id="parent">
    <div class="right">div2</div>
    <div class="left">Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta  sem, at ultrices ante interdum at. Donec condimentum euismod consequat.  Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin  at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec  ullamcorper augue varius eget.</div>
</div>
<br />
<button id="remove">Remove Div 2</button>

CSS：

#parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background:green;
}
.left {
    overflow: hidden;
    height: 100px;
    background:red;
}

JS：

$('#remove').on('click', function() {
    var div2 = $('.right')
    //div2.hide('slow');  // you could hide it as well  
    div2.remove();
});

示例：

http://jsfiddle.net/9Q86Y/

Answer 4

修改的

您可以使用
模仿表格
display:table

和

display:table-cell

见：http://jsfiddle.net/DUx3W/（帽子提示：@Jimmy Breck-McKye）。

我原来的桌子小提琴：http://jsfiddle.net/6KkRL/

有没有办法让div“贪婪”抓住宽度？

4 个答案: