css - 纯 CSS 漂亮的内联 block 折叠

Question

我有一个包含三个内联 block 的 header 。包含这些 block 的元素设置为text-align center，左边的 block 向左浮动，右边的黑色向右浮动。这会产生很好的效果，使得中间 block 的文本在屏幕上居中，(几乎)与窗口大小无关。

如果您将窗口缩小很多， block 就会堆叠在一起……这正是我所需要的。问题是，由于 float ，它们不会“跳”到位。也就是说，当方 block 从水平方向变为垂直方向并相互堆叠时，最右边的方 block 会粘在右侧(在左侧留下一个大的空白区域)。中间的 block ，因为 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。这可能吗？

Answer 1

不确定这是否是您想要的，但我认为您可以将三个 div 中的每一个都设为宽度的三分之一，如下所示:

http://jsfiddle.net/henrikandersson/vFkv9/1/