13

これを説明するのは少し難しいですが、試してみます。このスライダー チュートリアル ( http://css-tricks.com/slider-with-sliding-backgrounds/ ) を使用してステップ フォームを作成しています。

それは完全にうまく機能していますが、小さな問題があります。写真（大きな背景画像）をアップロードするセクションがあり、高さのサイズを変更していません。

このアップロード セクションは最初のスライドの上にあるため、画像をアップロードすると、2 番目と 3 番目のスライドが押し下げられます。最初のスライドに何が行われたかに関係なく、他のスライド (2 & 3) を一番上に保つ方法はありますか?

私が何をしているのかをさらに説明するのに役立つ簡単な図。

Ps:チュートリアルで使用したのと同じセマンティクスに従います。例えば。ID、クラスなど

4

4 に答える 4

0

問題は、div がコンテナーの全幅を自動的に占有し、それらがブロック レベルの要素であるため、スタックすることです。

これを機能させるには、アップローダーと最初のスライドを独自の個別の div でラップして、幅が制限され、他のスライドに影響を与えないようにする必要があります。

<div class="holder">
    <div class="first-slide-wrap">
        <div class="image-holder"></div>
        <div id="#slide-0"></div>
    </div>
    <div id="#slide-1"></div>
    <div id="#slide-2"></div>
</div>

CSS は次のように変更されます。

.first-slide-wrap {
    float:left;
    width:300px;
}
.first-slide-wrap .slide {float:none;}

フィドル: http://jsfiddle.net/PjxzH/

于 2013-08-20T16:09:59.277 に答える
0

<div class="slide" />最初のスライドで必要なものすべてのラッパーとしてを使用する必要があります。そうすれば、最初のスライドのファイル アップローダが他の 2 つのスライドに影響を与えることはありません。

ここに固定された JSFiddleがあります!

于 2013-08-19T01:54:22.333 に答える