0

我正在尝试制作一个水平滚动的 div，其中一系列视频彼此相邻，用户滚动查看更多视频。一切正常，除了最后一个视频之后有大量空白空间，几乎是滚动 div 大小的两倍。我曾尝试更改 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 回答