0

そのため、CSS だけを使用してクライアントの水平スクロールを実現しようとしています (これに役立つ JavaScript ライブラリがたくさんあることは知っていますが、それらを回避しようとしています)。

私はいくつかの基本的なコードをダウンさせています (このリンクとその中の JSFiddle の助けに感謝します: CSS 水平スクロール) が、実際に機能させることができません。

これが私が使用しようとしているサンプルコードです: http://jsfiddle.net/8Bkxh/

HTML:

    <section class="row">
    <div class="scroll-wrap">
        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot.png');?> ">

                    <div class="vid-title">
                        <h5>In-Studio Tutorial On Recording</h5>
                        <p>By <a href="#">David Boone</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout upcoming">
                        <p>Purchase Tickets Now!</p>
                    </div><!-- .callout upcoming -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="video-list">
                <div class="vid-thumb-wrap">
                    <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot2.jpg');?> ">

                    <div class="vid-title">
                        <h5>[Interview] The Revolution of Individual Production</h5>
                        <p>By <a href="#">Jon Foreman</a></p>
                    </div><!-- .vid-title -->

                    <div class="callout live">
                        <p>Happening Now!</p>
                    </div><!-- .callout live -->
                </div><!-- .vid-thumb-wrap -->
            </div><!-- .video-list -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->

        <div class="span4">
            <div class="vid-thumb-wrap">
                <img class="thumbnail stretch moveback" src="<?php echo base_url('assets/img/video-screenshot3.jpg');?> ">

                <div class="vid-title">
                    <h5>Q&A From Lengendary Pottery Teacher</h5>
                    <p>By <a href="#">George Alexson</a></p>
                </div><!-- .vid-title -->

                <div class="callout limited">
                    <p>Only 5 Tickets!</p>
                </div><!-- .callout limited -->
            </div><!-- .vid-thumb-wrap -->
        </div><!-- .span4 -->
    </div><!-- .scroll-wrap -->
</section><!-- .row -->

CSS:

.row {
    position: relative; 
    width: 960px!important;
}

.scroll-wrap { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    height: 180px!important; 
    white-space: nowrap!important;   
}

そのJSFiddleでリンクした3つの外部リソースを必ず確認してください

私がやりたいのは、ユーザーがこれらの 5 つの項目を垂直方向ではなく水平方向にスクロールできるようにすることだけです。

私はどこかでメンタルブロックを抱えているだけだと思います。これが誰かの迅速な解決策になることを願っています. 可能な限りすべてのサポートに感謝します。可能な場合は喜んで明確にします。

ありがとう、

キーナン

4

1 に答える 1

3

以前にこの問題を経験したことがあり、内部の div を設定して、既に行ったようdisplay: inline-blockに含む div を拡張することで解決しました。white-space: nowrap

機能しますが、ソリューションが機能しない理由がわかりません。私はこれを同じ方法で数年間使用したと確信していますが、ある時点で機能しなくなりました.

編集：floatブートストラップの場合、値を 明示的に設定することができますnone

于 2013-07-29T21:27:41.807 に答える