2

我有 2 个并排的 div。它们都可以通过 jquery 关闭。当它们都可见时，它们具有固定的宽度，但是当一个关闭时，我希望剩余的 div 扩展以占用关闭的 div 过去占用的宽度。有没有办法只使用CSS（除了关闭按钮）来做到这一点，还是我必须求助于javascript？

4

4 回答 4

2

我能看到用 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 需要做的就是处理当前应用于容器的类。

于 2012-05-07T18:25:53.043 回答
1

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

使用 jquery，每当您单击关闭时，将一个类切换到 div 的父级。找到点击关闭按钮的jquery代码并添加

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

像使用 css

#parent div { width: /*fixed*/100px; }
#parent.classname div { width: 100%; }
于 2012-05-07T18:32:50.833 回答
0

这样的事情有用吗？

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();
});​

例子：

于 2012-06-17T05:27:41.320 回答
-1

编辑

您可以使用模仿表格

display:table

和

display:table-cell

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

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

于 2012-05-07T18:58:20.413 回答