我有一个包含三个内联块的标题。包含这些块的元素设置为文本居中对齐，左侧块向左浮动，右侧黑色向右浮动。这会产生一个很好的效果，使得中间块的文本在屏幕上居中，（几乎）不管窗口大小。
如果您将窗口做得更小，则这些块会相互堆叠……这就是我所需要的。问题是，由于浮动，它们不会“跳”到位。即，当块从水平移动到垂直以堆叠在一起时，最右边的块粘在右侧（在左侧留下一个大的空白区域）。中间块，因为 text-align: center，也不会跳过。所以我在小屏幕上留下了“阶梯/阶梯”效果，但还不足以强制完全堆叠。
看看这个 js fiddle 看看我的意思：http: //jsfiddle.net/fphzY/15/
HTML：
<div id="top">
<div class="topBox">
<div id="companyLogo">
IMG
</div>
</div>
<div class="topMiddleBox">
<div id="shortcuts" class="headerList">
List of Links
</div>
</div>
<div class="topRightBox">
<div id="welcome">
Links
</div>
<div id="globalLinks">
Links
</div>
</div>
</div>
CSS：
#top{
padding:0;
text-align:center;
vertical-align:top;
}
.topBox{
min-width: 100px;
min-height: 100px;
background-color:#ccc;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
float: left;
}
#companyLogo {
margin: 15px 0px 10px 20px;
vertical-align: top;
background-color:#000;
color:#fff;
}
.topMiddleBox{
min-width: 100px;
min-height: 100px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
background-color:#66CCFF;
}
#shortcuts{
display: inline;
background-color:#000;
color:#fff;
}
.topRightBox {
min-width: 100px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
float: right;
margin-top: 27px;
background-color:#FF8000;
}
#welcome
{
font-weight: normal;
margin: 23px 20px 0px 0px;
text-align:right;
color: #424242;
font-size: 10pt;
background-color:#000000;
color:#ffffff;
}
#globalLinks
{
margin: 7px 20px 0px 0px;
vertical-align: middle;
text-align: center;
padding:5px 2px 0px;
background-color:#FFFF66;
color:#000000;
}
#globalLinks ul
{
list-style: none;
padding: 0;
margin-top: -5px;
margin-left: 0;
}
#globalLinks ul li
{
padding: 0;
margin-left: 3px;
display:inline;
}
#globalLinks ul li span
{
padding-right: 2px;
}
现在，我知道这是预期的行为，但我正试图找到一种方法来实现我的目标（三个水平容器 - 一个粘在左侧，一个粘在右侧，一个居中 - 很好地堆叠在窗口缩小时彼此顶部）仅使用 CSS。这可能吗？