Question

我正在尝试制作一个水平滚动的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;
}

Answer 1

#work_text div {

应该是

#work_text > div {

否则所有div元素都会继承这个巨大的宽度。（JSFiddle：yours，mine。）

此外，您的上一个视频只有480px宽度，而其他所有视频都是640px，因此会留下一些额外的空间。我建议添加特定的CSS以使最后div更小。

在水平滚动div中浮动元素后的空白区域

1 个答案: