javascript - CSS 溢出 Marquee-Line 和 Floating Div

Question

好的，我正在尝试让一排社交新闻提要在屏幕上滚动显示。我遇到的问题是，当我添加超过 6 个要显示的元素时，它会将它们放在新的一行中。我将如何将它们排成一行并使用 overflow:marquee-line 滚动它们？使用 Javascript 会更好吗？如果是这样，您知道任何脚本吗？

下面是我正在使用的图片:

这是我正在使用的 css 代码。

.social-media-mashup {
display:block;
width:100%;
height:150px;
overflow:marquee-line;
/* margin: 1em 0; */
}

.smm-item {
width:273px;
height:130px;
float:left;
margin-right:6px;
}

.smm-item p {
overflow:hidden;
height:48px;
}

.smm-item p.entry-meta {
overflow:hidden;
height:16px;
}

#anchor {
width:100%;
position:absolute;
bottom:0;
}

#rt-bottom { 
width:100%;
}

这是 HTML 结构。

<div id="anchor">
<div id="rt-bottom">
<div class="rt-container">
<div class="rt-grid-12 rt-alpha rt-omega">
<div id="smm-widget-2" class="widget social-media-mashup rt-block">
<!-- Social Media Mashup plugin by Brave New Media -->
<div class="social-media-mashup icons-grey">
    <!-- Social Media Mashup cache is enabled. Duration: 60 minutes -->

    <div class="smm-item smm-twitter">
        <p>Content</p>

        <p class="entry-meta">Meta</p>
    </div>

</div>
<!-- End Social Media Mashup plugin -->
</div>
</div>
<div class="clear"></div>
</div>
</div>

知道要做什么吗？

Answer 1

难道是:

overflow-style: marquee-line;

或者它不被任何浏览器支持...

Nathan Rohler 在线提供了这个教程:

http://www.tripwiremagazine.com/2011/07/jquery-tutorial-building-a-jquery-scroller.html

它使用 JQuery，您必须更改它以满足您的需要，但也许这就是您要找的东西，或者您可以从 JQuery 中找到一个插件...