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

ホルダーdivにすべての子供の幅を指定してから、オーバーフロー：非表示のCSSスタイルのコンテナーを作成します。スクロールする方法に従って、子を保持するdivを移動します。

Answer 2

代わりfloat:leftの使用display:inline-blockに、コンテナに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 3

あなたが説明するようにあなたの現在のコードは、実際に動作するはずです。ここだけのフィドルにダンプあなたの現在のコードは次のとおりです。http://jsfiddle.net/jblasco/mGYnf/

あなたは、いくつかの不要なCSSスタイルを持っているので、ここでは、ビットをクリーンアップしますhttp://jsfiddle.net/jblasco/7Sbc7/1/

何か問題を抱えている場合、それはあなたの中に何かあるかもしれませんPHPコードが問題を引き起こしているか、おそらく使用しているブラウザ固有のものでしょうか？