javascript - 在一系列 float : left divs 中创建/删除一行

Question

我有一个 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 推开(左边的向上，右边的向下)并填充它自己的行。然后，当再次单击时，它会返回到原始配置。

我的尝试:

1. 添加一个强力分隔符:只需使用 jQuery 在 div 前后堆叠
   
2. 切换 CSS 属性:clear: both for the desired div

可能因为时间比较晚，但是这两种方法看起来都不靠谱。实现此功能的更合理方法是什么？

感谢您的宝贵时间!

Answer 1

我想你想实现这个，请检查这个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);
   }
 });