2

Web ページで iPhone スタイルのスワイプ操作を実行しようとしています。アイデアは、サイドバーでリンクをクリックすると、サイドバーが左側に移動して、そのリンクがどこに行くかを明らかにするというものです。これを行うために、2 つのサイドバーを並べて作成します。表示されるサイドバーと、別の要素の後ろに隠れる次のサイドバーです。

サイドバーの例は、http://jsfiddle.net/gpcC6/7/ にあります。

私が抱えている問題は、ウィンドウのサイズが変更されると、2 番目のサイドバーが最初のサイドバーの下に移動することです。画面からはみ出すことになっても右側にとどまりたい。これは可能ですか？ありがとう

4

2 に答える 2

5

サイドバーをコンテナに入れ、フローティングではなくwhite-space: nowrap作成するdisplay: inline-blockと、指示どおりに機能するはずです。

white-space: nowrap一部のブラウザーでは、HTML の 2 つの div 間のスペースが実際のスペースとして解釈されることに注意してください。 

<div>
</div><!-- SPAAAAAACE -->
<div>
</div>

その間隔を削除するには、それらを同じ行に配置する必要があります

<div>
</div><div>
</div>

または、親要素にa を追加することもできますfont: 0;。この場合、間隔も削除されるコンテナーですが、その前にすべての要素のフォント サイズを明示的に定義する必要があることに注意してください。そうしないと、すべての子要素がフォントサイズも0。;)

詳細については、この質問とこの記事を参照してください。

サンプル| コード

CSS

div{
    font-size: 16px;
}

#topbar {
    height: 40px;
    background-color: blue;
}

.wrapper{
    white-space: nowrap;
    font-size: 0;
}

.sidebar {
    width: 200px;
    display: inline-block;  
    white-space: normal;
}

.title {
    height:30px;
    background-color: red;
}

.main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div class='wrapper'>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>

    </div>
    <div class="sidebar">
        <div class="title">
            title
        </div>
        <div class="main">
            blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
        </div>      
    </div>
</div>
于 2012-04-11T12:24:47.007 に答える
2

バーの周りにラッピング div を配置し、固定幅または最小幅を指定します。次に、サイドバーがこのラッピング コンテナに隣り合って収まるように見えるだけです。これにより、ウィンドウが小さく、水平にスクロールできる場合でも、それらが互いに隣り合っていることが保証されます.

于 2012-04-11T12:21:02.050 に答える