Question

感谢您的帮助。无论用户的屏幕分辨率如何，我都试图开发一个静态轮播（它不会移动，但它就像一个一样），它会在页面上延伸。换句话说，我希望图像水平平铺并在屏幕上运行（但隐藏，所以没有滚动条）。

这是标记：

                <div id="video_carousel_full">

            <?php query_posts( 'post_type=videos');
 if (have_posts()) : while (have_posts()) : the_post();?>

                        <div class="vid_img" style="background: url(<?php
$attachments = get_children( array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' =>'image') );
foreach ( $attachments as $attachment_id => $attachment ) {
    echo wp_get_attachment_url( $attachment_id, 'medium' ); break;
} ?>) no-repeat bottom left;"></div>

             <?php endwhile; endif; ?>

        </div><!-- end video_carousel_full -->

这是CSS：

#video_carousel_full {
float: left;
width: 100%;
height: 250px;
background-color: #999;
border-top: 5px solid #ffc600;
border-bottom: 5px solid #ffc600;
overflow: hidden;
}

    .vid_img {
    float: left;
    display: block;
    width: 370px;
    height: 250px;
    clear: none;
    }

谢谢！

Answer 1

使用display:inline-block代替float:left，并将white-space:nowrap添加到容器中：

#video_carousel_full {
    /*float: left;*/ /*removed*/
    /*width: 100%;*/ /*removed*/
    height: 250px;
    background-color: #999;
    border-top: 5px solid #ffc600;
    border-bottom: 5px solid #ffc600;
    overflow: hidden;
    white-space:nowrap /*added*/
}

.vid_img {
    /*float: left;*/ /*removed*/
    display: inline-block; /*changed */
    width: 370px;
    height: 250px;
    /*clear: none;*/ /*removed*/
}

Answer 2

您当前的代码应该按照您的描述实际工作。这是您当前的代码，只是放入小提琴：http://jsfiddle.net/jblasco/mGYnf/

这里有一些清理，因为你有几个不必要的CSS样式：http://jsfiddle.net/jblasco/7Sbc7/1/

如果您遇到任何问题，可能是您的PHP代码中出现问题，或者可能是您正在使用的浏览器特有的？

Answer 3

给予持有者div一个等于其所有子节点的宽度，然后创建一个具有溢出的容器：隐藏的CSS样式。然后根据你想要滚动的方式移动包含孩子的div。

CSS静态轮播 - 无法让它在整个页面上拉伸

3 个答案: