1

ステップバイステップ（合計4ステップ）のチェックアウトを実行しようとしています。水平スライダーのセットアップのようなものを考えました。

4 つのコンテナーを含む幅 400% のコンテナーを作成しました。これらのコンテナーは並べて配置し、ウィンドウの 100% を埋める必要があります。これは一種の水平スライダーですが、フォームとして使用したいです。

[[[コンテナ 1][コンテナ 2][コンテナ 3][コンテナ 4]]]

私のHTML：

    <div class="container fullWidth">

        <div id="checkoutContainer">

            <div class="checkout" id="cart">Cart</div>
            <div class="checkout" id="contact">Contact</div>
            <div class="checkout" id="address">Addresse</div>
            <div class="checkout" id="overview">Übersicht</div>
            <div class="checkout" id="thankyou">Danke</div>

        </div>

    </div>

私のCSS：

.container.fullWidth {
    width : 100%;
    overflow-x: hidden;
}

div#checkoutContainer {
    background-image: url(../img/background.jpg);
    background-repeat : repeat-x;
    width : 500%;
    height : 657px;
}

div#checkoutContainer div.checkout {
    float : left;
    width : 900px;
    height : 657px;
}

問題は次のとおりです。JavaScriptを使用せずに、単一のdivでページの幅を埋めることができますか(ページの幅を検出して幅を設定できることはわかっています)? div.checkout { width : 100% }それらが互いにスタックするため、設定は機能しません。

4

2 に答える 2

4

簡単な例: http://jsfiddle.net/DTTnB/

これを好きなように微調整できます

離陸したoverflow-x: hiddenので、横になっているのがわかります。あなたは正しい軌道に乗っていた

主な違い:

各コンテナは、ラッピング コンテナの一部のみを作成しました。

。チェックアウト： width : 20%;

彼らのラッピング コンテナは、各コンテナが少なくともページ幅を占めるように、すべてのコンテナを収容できる幅にしました。

チェックアウトコンテナ:

width : 1000%; これを微調整できます

于 2013-07-06T20:39:18.307 に答える