div容器上的动画

Question

我正在实现一个twitter自动收报机。每个tweet都是一个div容器(id=为id="tweet1“、"tweet2”等)其中包含多个其他div元素(这些div表示tweet的状态、日期、时间、标签等)。所有这些tweet都包含在最外层的div中，比如id="twitter-feed“。

结构是as，

<div id="twitter-feed">....
    <div id="tweet1">....
        <div><div> //For image
        <div><div> // For status
    <div id="tweet2">....
        <div><div> //For image
        <div><div> // For status    
</div>

我想让这些推文从左到右，一条接一条地动起来。

CSS有，

#twitter-feed {
position:fixed;bottom:0;left:0;width:100%;font-size:50px;Background-color:#CD5C5C;
}

#twitter-feed div {
position:relative;color:yellow;animation:mymove 50s infinite linear;-webkit-animation:mymove 50s infinite linear;   
}

@keyframes mymove
{
from {left:0px;} 
to {left:100%;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:100%;}
}

我还有可用的javascript代码，它获取tweet并填充div元素。

但是这段代码给出的输出是，

Tweet1....Animating from left to right...then New Line
Tweet2....Animating from left to right...then New Line 

我想知道，我怎样才能把这些div放在一起，这样tweet就会一个接一个地出现，而不是一个接一个。除了这些tweet应该显示的方式之外，其他一切都运行得很好。

我正在使用下面链接中的代码。Javascript加载tweet，我修改了#twitter-feed的CSS代码。The code which retrieves the tweets如果您查看Java脚本，您将看到tweet被填充为div。

请帮帮忙。

谢谢，Peeyush

Answer 1

基本上，您需要对其进行样式设置，以便它们可以内联。我想这就是你想说的：http://jsfiddle.net/B6KbV/

如果是这样的话，这就是你需要的css：

#twitter-feed {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    font-size:50px;
    Background-color:#CD5C5C;
    white-space: nowrap;
}
#twitter-feed div {
    display: inline;
    position:relative;
    color:yellow;
    animation:mymove 50s infinite linear;
    -webkit-animation:mymove 50s infinite linear;
}
@keyframes mymove {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
 {
    from {
        left:0px;
    }
    to {
        left:100%;
    }
}

您需要display: inline将其保持在同一行上，并需要white-space: nowrap;来阻止文本移到下一行