jQuery能否重新定位和调整div的大小？

Question

我有一个带头部、底部和中间区域的页面。中间区域有三个等宽的列，每个占33%的宽度。

当单击某一列时，我希望该列能够超过另外两列，宽度变为100%，而另外两列的宽度重新分配为50%-50%。

• 使用jQuery是否可以实现这种效果（并保证可靠性），还是太麻烦了？
• 能否使用动画来完成？
• 有没有相关的示例可以参考？

- Kamo

---

三个等宽的列。当其中一个设置为百分之百时，会不会使其他两列进入下一行呢？你所问的问题，GenericTypeTea已经给出了明确的答案，但第一列并不会盖过其他两列，而是会被挤出去到下一行。你需要设定一些比例。 - simplyharsh

@harshh - 看看我提供的jsFiddle。似乎工作得很好。 - djdd87

Answer 1

是的，它可以完成：

$("#column1").css("width", "100%");
$("#column2, #column3").css("width", "50%");

如果想将列移到顶部，可以这样做：

$(column).parent().prepend(column);

我在jsFiddle上做了一个示例这里，演示如何在单击div时执行操作。

使用jQuery可能是最可靠的方法，因为它被编写为跨浏览器兼容。

查看css方法的文档这里。

- djdd87

---

动态更改宽度在Internet Explorer上无法实现。IE8不确定，但6和7不行。最近测试过。 - tomsseisums

@GenericTypeTea :-) 太棒了！ - Ben Everard

我并不是说你完全不能调整它们的大小。最近，我正在处理一个有趣的登录面板，其中涉及到宽度的变化等问题。当使用jQuery在运行时更改元素的宽度时，它在Internet Explorer 6和7上无法正常工作，但我不记得Internet Explorer 8的情况了。当然，您可以通过静态的css值随意调整div的大小。但我不确定这是否是由于我的静态css引起的。 - tomsseisums

@GenericTypeTea：http://jsfiddle.net/g7BsA/ <- 这里有一个例子，由于该元素的绝对定位，在IE6、IE7中不会被调整大小。在IE8和其他现代浏览器中可以正常工作。 - tomsseisums

@GenericTypeTea：现在这才更加有趣。 :O - tomsseisums

Answer 2

请查看示例B，我认为那就是你要找的。我自己对jQuery没有太多经验，所以不幸的是这是我能给你的最好建议了。

链接：http://docs.jquery.com/Tutorials:Live_Examples_of_jQuery

- KSwift87