将具有动态宽度的div置于父对象的中心,其中宽度可以大于父对象

好吧,我希望我能说清楚我需要什么。

我有5个分区:包装器、分区1、分区2、分区3和分区4。

HTML格式:

<div id="main">
    <div id="one">1</div>
    <div id="two">2
        <div id="four">4</div>
    </div>
    <div id="three">3</div>
</div>

CSS:

#main{
    height:200px;
    border: 1px solid red;
    float:left;
}

#one{
    min-width:100px;
    max-width:200px;
    background-color:#cccccc;
    height:100%;
    float:left;

}

#two{
    width:50px;
    height: 50px;
    background-color:#ccffff;
    float:left;
 }

#three{
    min-width:100px;
    max-width:200px;
    background-color:orange;
    height:100%;
    float:left;
}
#four{
    min-width:52px;
    max-width:200px;
    background-color:pink;

}

Please see this fiddle

Div4包含在其父div2中。Div4总是需要从div2居中,即使它比div2大。

如何做到这一点。此时,div4总是在div2中。到处玩浮动、定位和边距,但由于div 4的宽度是动态的,我永远无法使其居中。

假设我在div 4中输入了文本,那么我想让它看起来像这样:

 _______________
 | 1  |2  | 3   |
 |  __|___|___  |
 |  |div4 txt|  |
 |  |________|  |
 |____|___|_____|

我希望这部杰作能说明问题。Div4可以更大或更小,具体取决于其中的文本。

如果将div2和div4放在一个新的包装器中更容易,我认为这很好,但div1和div2应该始终“连接”到div2(也尝试过这样做,但这导致div1和div 3与div2分离)

我也尝试过:

1. 搜索此网站:)
2. 搜索谷歌
3. 保证金:0-50%;
4. 位置:相对;
5. 显示:内联块;
6. 显示:选项卡;(和单元格)
7. 等

希望有人能帮忙。

ps也不总是显示div1和div3!可以隐藏,3个可以隐藏,但两者都可以隐藏