0

ユーザーがスクロールしてより多くのビデオを表示しながら、一連のビデオを並べて横にスクロールする水平スクロール div を作成しようとしています。最後のビデオの後に大量の空きスペースがあり、スクロール div のサイズがほぼ 2 倍になっていることを除いて、すべてが機能しています。div の幅の変更、右マージン/パディングの変更などを試みましたが、役に立ちませんでした。何か案は？前もって感謝します！

HTML:

<div id="work_text">
    <div>

        <div class="work_post"><div class="work_title"><h2>SALVATION (Official Trailer)</h2></div><iframe src="http://player.vimeo.com/video/65980573?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title_2"><h2>DIESEL BLACK GOLD<br />AUTUMN WINTER 2013/14</h2></div><iframe src="http://player.vimeo.com/video/65979791?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title"><h2>Extreme Measures (BULLETT TV)</h2></div><iframe src="http://player.vimeo.com/video/65977965?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title"><h2>License To Ill (BULLETT TV)</h2></div><iframe src="http://player.vimeo.com/video/65976653?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title"><h2>SALVATION</h2></div><iframe src="http://player.vimeo.com/video/65972978?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title_2"><h2>Nico Amarca<br />Cinematography Reel 2013</h2></div><iframe src="http://player.vimeo.com/video/63985060?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="640" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>

        <div class="work_post"><div class="work_title"><h2>The Savior</h2></div><iframe src="http://player.vimeo.com/video/58233834?title=0&amp;byline=0&amp;portrait=0&amp;color=979999" width="478" height="360" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
  </div>

CSS:

#work_text {
height:450px;
width: 880px;
overflow: auto;
margin-top: 10px;
padding-left: 2px;
}

#work_text div {
width:4690px; /*this value=6x[video width(640px) plus right margin width(30px)] + 478px or + 670px = 4498px or 4690px */
}

#work_text div.work_post {
width:670px;
height:360px;
float:left;
}

#work_text div.work_post_full {
width:478px;
height:360px;
float: left;
}

#work_text div.work_title {
height: 45px;
padding-top: 15px;
}

#work_text div.work_title_2 {
height: 60px;
}
4

1 に答える 1

1 
#work_text div {

する必要があります

#work_text > div {

それ以外の場合、すべてのdiv要素はその巨大な幅を継承します。(JSFiddle:あなたのもの、私のもの。)

また、最後のビデオは幅のみ480pxですが、他のすべてのビデオは幅640pxであるため、少し余分なスペースが残ります。特定の CSS を追加して、最後をdiv小さくすることをお勧めします。

于 2013-06-25T18:57:18.937 に答える