好的,我正在尝试让一排社交新闻提要在屏幕上滚动显示。我遇到的问题是,当我添加超过 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>
知道要做什么吗?
最佳答案
难道是:
overflow-style: marquee-line;
或者它不被任何浏览器支持...
Nathan Rohler 在线提供了这个教程:
http://www.tripwiremagazine.com/2011/07/jquery-tutorial-building-a-jquery-scroller.html
它使用 JQuery,您必须更改它以满足您的需要,但也许这就是您要找的东西,或者您可以从 JQuery 中找到一个插件...
关于javascript - CSS 溢出 Marquee-Line 和 Floating Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9895897/