Css专栏魔术

我的布局如下：

b1      b2      b3
c1      c2      c3

并希望在不改变现有布局的情况下插入#monster先生（啊！），但实现以下目标：

b1      b2      b3
ARGH            c3
c1      c2      

小提琴：

---

我们的目标是有一套固定的css规则，删除或添加Monster（ARGH）div将如图1或图2所示。

这就是您要寻找的吗

---

也许我不理解这个问题？

我不认为只有css才能解决这个问题。您将需要javascript来获得它。几乎，但c3必须从b3的正下方开始，和/或与ARGHGot ya在同一行。在这一点上，我支持Sven，您需要使用javascript动态地根据自己的喜好对DOM元素进行重新排序，您不能按照元素当前的排序方式进行排序。

#main
{
    width: 300px;
    overflow:hidden;
}

.box
{
    float: left;
    width: 100px;
    height: 50px;
}

.col
{
    float: left;
    width: 85px;
    height: auto;
    margin-right: 15px;
    background-color: #CCC;
}

#monster
{
    width: 185px;
    margin-right: 15px;
    height: 100px;

}