0

jScrollPane（jscrollpane.kelvinluck.com）を使用して、一連の画像をdivと一緒に水平方向に表示しようとしています。一連の画像を機能させることができましたが、divを作成すると、その中のコンテンツは（a）divの外に出るか、（b）overflow：hiddenとラベル付けすると、スクロール効果を継承するため、一線を画しません。

私がやりたいのは、div内のテキストを通常のテキストのように動作させ、コンテナーの幅に近づくときに行をドロップダウンすることです。

これが私のコードです、

<div class="scroll-pane">                                                                           
    <ul>
        <li ><img src="img/portfolio1.gif" /> <span></span></li>
        <li ><img src="img/portfolio2.gif"/> <span></span></li>
        <li ><img src="img/portfolio3.gif"/> <span></span></li>
        <li>
            <div class="info">
                <h2>Modern Palace Resident</h2>
                <p>This is going to describe the apartment a little bit, including design philosophy, themes for the apartments, and why you chose to do it this way. This can excite them about the apartment, which will lead them to buy. You can leave a link <a href="apt.php">here</a> as well.</p>
            </div>
        </li>
    </ul>
</div>

関連するSCSSは次のとおりです

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;

    ul {
        float:left;
        list-style-type:none;
        li{
            float:left;
            .info{
                float:left;
                width:300px;
                height:420px;
                background-color:gray;
                overflow:hidden;
            }
            img{
                height:420px;
            }
        }
    }
}

関連する部分は

.info{
    float:left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

コンテナh2をp尊重するために、ここで何を編集する必要がありますか？.info

これも可能ですか？

4

1 に答える 1

0

上記の構文でCSSがどのように機能しているかはわかりません。そもそも次のようにフィドルで機能させるには、変更する必要がありました。

.scroll-pane{
    width: 100%;
    height: 450px;
    overflow: scroll;
    white-space:nowrap;
}

.scroll-pane ul{
    float:left;
    list-style-type:none;
}

.scroll-pane ul li{
    float:left;
}

.scroll-pane ul li img{
    height:420px;
}

.info{
    display: block;
    clear: left;
    width:300px;
    height:420px;
    background-color:gray;
    overflow:hidden;
}

とにかく、テキストが折り返されない理由は、.scroll-pane設定したスタイルwhite-space:nowrap;で、コンテナに継承されるためです。

情報テキストを折り返すには、に追加white-space:normal;し.infoます。

デモ

そもそもフィドル内で機能するようにCSSを手動で修正する必要があったので、何かが正しく表示されない場合は遠慮なくお知らせいただくか、独自のフィドルを追加してリンクを投稿してください。

とにかく、ラッピングはあなたがスタイルに追加white-space:normal;したものである必要があります.info

于 2012-11-29T00:41:25.530 に答える