Question

所以我尝试使用CSS完成客户端的水平滚动（我知道有很多JavaScript库可以帮助解决这个问题，但我试图避免这些）。

我有一些基本的代码（感谢这个链接的帮助和其中的JSFiddle：CSS horizontal scroll）但实际上无法使它工作。

以下是我尝试使用的示例代码： 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中链接的三个外部资源

我想要做的就是让用户水平滚动浏览这五个项目不。

我想我只是在某个地方有一个心理障碍，我希望这对某些人来说可能是一个快速解决方法。我非常感谢任何可能的帮助，我很乐意在可能的情况下澄清。

谢谢，

基南

Answer 1

之前我遇到过这个问题，并通过将内部div设置为display: inline-block并使用white-space: nowrap扩展包含div来解决它，就像您已经做过的那样。

有效，但我不知道为什么你的解决方案不起作用。我很确定我以相同的方式使用了它多年，并且在某些时候它只是停止了工作。

修改如果是bootstrap，您可能希望明确地将float值设置为none

使用CSS进行水平滚动

1 个答案: