Question

好的，我希望我能说清楚我需要什么。

我有5个Div：包装器，div 1，div 2，div 3和div 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

Div 4包含在其父div 2中.Div 4总是需要以div 2为中心，即使它比div 2大。

如何做到这一点。此时div4总是在div2中。玩漂浮物，定位和边距，但由于div 4的宽度是动态的，我永远不能让它成为中心。

假设我已经在div 4中输入了文本，那么我想让它看起来像这样：

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

我希望这部杰作能说清楚。 Div4可以更大或更小，具体取决于其中的de text。

如果将div2和div4放在一个新的包装器中更容易，我就没问题了，但是div 1和div 2应该总是“连接”到div 2（也试过这个，但这导致了div 1和div 3与div2分开）

我也尝试过：

搜索此网站：）
搜索谷歌
保证金：0 -50％;
职位：亲属;
display：inline-block;
display：tabel; （和细胞）
等

希望有人可以提供帮助。

ps也不总是显示div 1和3。！可以隐藏，3可以隐藏，但两者都可以隐藏

2 个答案:

答案 0 :(得分：2)

答案 1 :(得分：1)

Answer 1

我认为你必须使用绝对定位。

#four{
    min-width:52px;
    max-width:200px;
    width: 200px;
    background-color:pink;
    position: absolute;
    top: 50%;
    left: calc(50% - 100px)
}

看到这个小提琴：http://jsfiddle.net/5dh66t14/

Answer 2

您可以使用此CSS：

#four {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

<强> Working Fiddle

在父级中居中具有动态宽度的div，其中宽度可以大于父级

2 个答案: