html - CSS 静态轮播 - 无法在整个页面上展开

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*/
}