Вопрос по DIV и uKit (не обращайте внимания на знак вопроса)?

Question

[Paczanchik_v_tanke]

Здравствуйте. Создаю сайт на ukit'е. В какой-то момент потребовался отдельный раздел с новостями. Их там всё равно немного - четыре новости в день для моей цели более чем достаточно, а потом буду обновлять каждый день. Вот и решил вставлять туда только 4 колонки с ссылками на полную версию, в каждую из них запихнуть div со стилями, а там уже и писать описание и фотографию вставлять.
Решил затестить в визуальном редакторе - работает. Всё показывается. А вот проблемы начались, когда я решил проверить текст...
Вот и затестили... Он переносится на другую колонку.
Привожу код:

<article class="columns-2">
<div class="news">&nbsp;</div>

<div class="news">&nbsp;</div>

<div class="news">&nbsp;</div>

<div class="news">&nbsp;</div>
</article>
<style type="text/css">.news {
  background-color: #228B22;
  color: white;
  border: 2px solid black;
}
.columns-2 {
  column-count: 4;
}
</style>

И сам вопрос - как, блин, сделать так, чтобы он понял: "Окей, вот эти колонки, они отдельно от друг друга, не приплетай одну к другой". Мне нужно сделать их раздельными, чтобы перенос работал без связей.
(Ну или в крайнем случае не мучаться и вписать всё в одну строчку)

Comments

[Froggyweb]

Сам подход неверный.
пихать это все в один виз - идея так себе.
Лучше сделать каждую новость отдельно и вывести как надо. 3 или 24 зависит от надобности и дизайна.

Answer 1

[Rsa97]

Конечно переносится. Вы же сами написали, что всё содержимое article надо уместить в четыре колонки. При этом браузер автоматически разбивает содержимое так, чтобы все колонки были максимально близкого размера.
Если хотите, чтобы каждая колонка была независимой, то для этого есть flex'ы, grid'ы и, прости господи, табличная вёрстка.