JS handlebar {{each}}, CSS float: inline-start работает только для первого элемента [закрыто] ⇐ Html

[Anonymous]

Я впервые пытаюсь использовать JS после изучения Handlebars в Codecademy. Это прекрасно работает; единственная проблема заключается в том, что только первый элемент {{each}} учитывает мой CSS: .limage {float: inline-start;
HTML:

Код: Выделить всё

{{#each lightnovel}}

[url=#]Learn more[/url]



{{/each}}

CSS:

Код: Выделить всё

.lightnovel {
margin-left: 2%;
margin-right: 2%;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}

#block {
background-color: lightgray;
border: solid 1px black;
margin-top: 2%;
padding: 1%;
border-radius: 15px;
width: auto;
}

.lnimage {
float: inline-start;
margin-right: 1%;
}

.lightnovel p {
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
}

.lightnovel button {
background-color: rgb(194, 118, 18);
padding: 0 20% ;
}

.details {
vertical-align: middle;
width: 100%;
margin: 0 auto;
padding: 2%;
}

JS:

Код: Выделить всё

const context = {
lightnovel: [
{
lnimage: 'resources/images/oshinobihime.jpg',
JPtitle: '誘拐されそうになっている子を助けたら、お忍びで遊びに来ていたお姫様だった件',
roumaji: '(yuukai saresou ni natte iru ko wo tauketara, o shobi de asobi ni kiteita o hime-sama datta ken)',
synopsis: `Kiriyama Seito, an ordinary high school student, happens to witness a kidnapping in the middle of summer vacation.
Seito saves a girl named Luna who is about to be abducted, and ends up staying under the same roof as her, as she has nowhere to go.
As Seito cohabit with Luna, who is beautiful, has an incredible figure, and a cheerful personality, he gradually becomes attracted to her.
Then, on the first day of school, Luna suddenly becomes Seito's classmate as an exchange student.
It turns out that Luna is actually a princess of a certain country, and like Seito so much that she declares in front of everyone being Seito's fiancee!
"I-I only do this with Seito-sama... I wouldn't do it with anyone else..."
A sweet and romantic youth comedy with the refined, pure and innocent princess Luna!`
},
{
lnimage: 'resources/images/OtonariAsobi.jpg',
JPtitle: 'orfkeojefpr',
roumaji: 'a definir',
synopsis: `WIP`
}
]
};

const templateElement = document.getElementById('templateHB');
const templateSource = templateElement.innerHTML;
const template = Handlebars.compile(templateSource);
const compiledHtml = template(context);
document.getElementById('informations').innerHTML = compiledHtml;

Визуально я ожидаю, что второй блок будет похож на первый, с текстом справа от изображения и будет автоматизирован с помощью функции {{each}}.



Подробнее здесь: https://stackoverflow.com/questions/798 ... st-element