我有一个 div 元素列表,所有元素都带有 float:left 一个接一个,就像这样
<div id="container">
<div id=0" style="float:left;> Stuff </div>
<div id=1" style="float:left;> Stuff </div>
<div id=2" style="float:left;> Stuff </div>
...
<div id=n" style="float:left;> Stuff </div>
</div>
我要实现的目标如下:
如果我点击其中一个 div,它将把周围的 div 推开(左边的向上,右边的向下)并填充它自己的行。然后,当再次单击时,它会返回到原始配置。
我的尝试:
- 添加一个强力分隔符:只需使用 jQuery 在 div 前后堆叠
- 切换 CSS 属性:clear: both for the desired div
可能因为时间比较晚,但是这两种方法看起来都不靠谱。实现此功能的更合理方法是什么?
感谢您的宝贵时间!
最佳答案
我想你想实现这个,请检查这个Fiddle
var parentWidth = $("#container").css("width");
var originalWidth = $($("#container div")[0]).css("width");
$("#container div").click(function(){
if($(this).css("width") != parentWidth) {
$(this).css("width",parentWidth);
}
else {
$(this).css("width",originalWidth);
}
});
关于javascript - 在一系列 float : left divs 中创建/删除一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23509417/