css - CSS列魔法

Question

我有以下布局：

b1      b2      b3
c1      c2      c3

并想插入先生。#monster（啊！）不改变现有布局，但实现以下目标：

b1      b2      b3
ARGH            c3
c1      c2      

小提琴：http: //jsfiddle.net/tt5P8/

目标是拥有一组固定的 CSS 规则，其中删除或添加 Monster (ARGH) div 将如图 1 或图 2 所示。

Answer 1

这是你想要的？

http://jsfiddle.net/tt5P8/1/

#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;

}

也许我不明白这个问题？