Question

我有一个包含三个内联块的标题。包含这些块的元素设置为文本对齐中心，左侧块向左浮动，右侧黑色向右浮动。这样可以产生很好的效果，使得中间块的文本在屏幕上居中，（几乎）无论窗口大小如何。

如果你把窗口缩小，那么这些块就会叠加在一起......这就是我需要的东西。问题是，由于浮标，它们不会“跳”到位。即，当块从水平移动到垂直以堆叠在彼此之上时，最右边的块粘到右侧（在左侧留下大的空白区域）。由于text-align：center，中间块也不会跳过。因此，我在屏幕上留下了“阶梯/阶梯”效果，这些屏幕很小，但不足以强制完全堆叠。

查看这个js小提琴，看看我的意思：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

我担心纯粹的CSS无法实现你想要的东西......

...除非您的三个div可以具有相同的固定宽度。

在这种情况下，只需将它们全部向左浮动，如下所示：

http://jsfiddle.net/fphzY/16/

Answer 2

不确定这是否是你想要的，但我想你可以让三个div中的每一个都是宽度的三分之一，如下所示：

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

纯CSS很好的内联块崩溃

HTML：

CSS：

2 个答案: