0

3つのインラインブロックを含むヘッダーがあります。これらのブロックを含む要素はtext-aligncenterに設定され、左側のブロックは左に浮き、右の黒は右に浮きます。これにより、ウィンドウサイズに関係なく、（ほぼ）中央のブロックのテキストが画面の中央に配置されるという優れた効果が得られます。

ウィンドウをはるかに小さくすると、ブロックが互いに重なり合います...これが私に必要なことです。問題は、フロートのために、それらが所定の位置に「ジャンプ」しないことです。つまり、ブロックが水平から垂直にシフトして互いに積み重なると、右端のブロックが右側に固定されます（左側に大きな空白が残ります）。そして、中央のブロックは、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;
}

今、私はこれが予想される動作であることを知っていますが、私の目標を達成する方法を見つけようとしています（3つの水平コンテナ（1つは左側に貼り付けられ、1つは右側に貼り付けられ、もう1つは中央に配置されます）は上にうまく積み重ねられますCSSだけを使用して、ウィンドウが縮小するときに互いの上部に表示されます。これは可能ですか？

4

2 に答える 2

1

これが必要かどうかはわかりませんが、次のように、3つのdivのそれぞれを幅の3分の1にすることができると考えていました。

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

于 2012-09-16T19:24:26.837 に答える
0

純粋なCSSではあなたが望むことは不可能だと思います...

...3つのdivが同じ固定幅を持つことができない場合。

この場合、ここに示すように、それらをすべて左にフロートさせます。

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

于 2012-09-16T18:55:17.503 に答える