CSS溢出选框行和浮动div

好吧我试图让一行社交新闻feed跨屏幕选取框。我遇到的问题是，当我添加超过6个项目来显示时，它将它们放置在一个新的行上。我将如何让他们进入一行，他们使用溢出：字幕线来滚动他们？使用Javascript会更好吗？如果是这样，你知道任何脚本？CSS溢出选框行和浮动div

下面就是我一起工作的照片： my issue

这是我一起工作的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>

不知道该怎么办？

来源

2012-03-27 jmalais

使用'white-space：nowrap;'应该阻止它们换行到新行。 – jasonlfunk 2012-03-27 19:03:02

我不确定你想澄清什么。但有两行条目，一条6条，另一条4条。我想要一行条目总数为10，一次只显示6条，但滚动条。 – jmalais 2012-03-27 19:16:24

另外，'white-space：nowrap;'没有对条目起作用，只对文本起作用。 – jmalais 2012-03-27 19:23:02

难道是：

overflow-style: marquee-line;

，或者它不是由任何浏览器支持...

即使世界本教程在网上由Nathan Rohler：

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

使用的JQuery ，你必须改变它以适应你的需求，但也许这是你正在寻找的，或者你可以去找到一个JQuery插件...

来源

2012-03-27 20:34:53 jveselka

http://jsfiddle.net/jSnTG/ 这是我尝试将该教程改为您可能想要/需要的内容。反正好运！ – jveselka 2012-03-27 22:46:50

谢谢，不幸的是它没有工作。 – jmalais 2012-04-02 23:20:47

CSS溢出选框行和浮动div

回答

相关问题