Javascript 围绕较大的div和较小的div？

我有一个令人兴奋的任务。。。为了我。以下是我努力实现的目标

小提琴中的代码：

HTML

简言之：

我有三个正方形的尺寸。我真的需要用小盒子包围大盒子和垂直盒子，但请注意无论它们的位置是什么（例如，大之前两个小盒子，或大-小-大-小-大，或四个小盒子-垂直-小-大等等）。不仅在大和垂直框的右边，而且在左边也应该有一个小框，所以不会有像我的示例中那样的空行。。。另外请注意，我不想用“小盒子”来装我的小盒子，就像我最近读到的解决这个问题的唯一方法一样。 我可以使用jquery或js或您建议的所有工具来实现目标：）

---

附言：想要的结果图像：

不确定你的意思，但试试这个

#big {
    float:left;
    width:100px;
    height:100px;
    background-color:gray;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

#small {
    float:left;
    width:50px;
    height:50px;
    background-color:gray;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

我的答案来自于一次搜索，而你想要实现的是非常好的

正如预期的那样，实现这一点超出了CSS的功能范围（尽管可能会让我们在那里/附近找到一个仅使用CSS的解决方案）

从那篇文章中有许多指向javascript库的链接

---

没有什么值得称赞的，因为这些信息来自于一次搜索——希望通过研究文章和javascript库，我们能找到正确的方向，看看发生了什么，并找到最简单的工作实现。

这里有一个可能的css解决方案。基本上，我让大盒子覆盖小盒子，让它们的布局保持中立

.bigsq {
    width: 20%;
    height: 20%;
    background: red;
    float: left;
    display: block;
    margin-bottom: -20%;
    margin-right: -20%;
    z-index: 1;
    position: relative;
}

---

一个可能的解决方案是使用。 下面是您的代码的外观：

HTML

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
  ...
</div>

---

不要通过突出显示

“code”

来规避网站规则。如果没有代码，您无法添加小提琴，这是有原因的。您试图超链接，但对我说

jsiddle链接必须附带代码
：p如果您提供了所需结果的图片，您的问题会更好理解。（没有否决）+1这是一个好问题@spook。我认为投票被否决是因为JSFIDLE没有发布任何代码，所以在试图进行编辑时提醒了我。+1这个问题很有趣，一个解决方案可能在其他情况下有用。回答可能是一个油嘴滑舌的标签-将问题添加到书签，看看这是否有帮助。这是一个很好的解决方法，只是它会覆盖现有的小盒子。但在我的情况下，它会起作用，因为盒子的内容将是图像，它们没有严格的显示顺序，所以我可以隐藏其中的两个：）谢谢！
.bigsq {
    width: 20%;
    height: 20%;
    background: red;
    float: left;
    display: block;
    margin-bottom: -20%;
    margin-right: -20%;
    z-index: 1;
    position: relative;
}

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
  ...
</div>

$("#container").nested({selector: '.box'});