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

回答

相關問題