Я использую титтинг. Каждый твит представляет собой контейнер div (с идентификаторами: id = "tweet1", "tweet2" и т.д.), В котором есть несколько других элементов div в нем (эти divs определяют статус твита, дату, время, теги и т.д.). Все эти твиты содержатся в самом удаленном div, например, с id = "twitter-feed".
Структура такая же,
<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, который получает твиты и заполняет элементы div.
Но этот код дает результат как,
Tweet1....Animating from left to right...then New Line
Tweet2....Animating from left to right...then New Line
Я хочу знать, как я могу поместить эти divs так, чтобы твиты появлялись один за другим, а не один под другим. Все остальное отлично работает, кроме способа отображения этих твитов.
Я использую код из приведенной ниже ссылки. Javascript загружает твиты, и я изменил код CSS для # twitter-feed. Код, который извлекает твиты. Если вы посмотрите на скрипт Java, вы увидите, что твиты заполняются как div.
Пожалуйста помоги.
Спасибо, Peeyush
В основном вам нужно стилизовать его так, чтобы они вошли в линию. Вот что я думаю, что вы имеете в виду: http://jsfiddle.net/B6KbV/
Если это так, вам нужно css wise:
#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;
для остановки перевода текста на следующую строку