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 中链接的三个外部资源

我想做的就是允许用户水平滚动这五个项目而不是垂直滚动。

我想我只是在某个地方出现了精神障碍，我希望这对那里的人来说可能是一个快速的解决方案。在可能的情况下，我非常感谢任何和所有的帮助，我很乐意在可能的情况下澄清。

谢谢，

基南

4

1 回答 1

3

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

有效，但我不知道为什么您的解决方案不起作用。我很确定我以同样的方式使用了几年，在某些时候它就停止了工作。

编辑： 在引导的情况下，您可能希望明确地将float值设置为none

于 2013-07-29T21:27:41.807 回答