Двухколонный текст
«Двухколонный»: используя стили, сделайте страницу, в которой текст выводится в две колонки и первая буква каждой колонки оформлена в виде буквицы. Я знаю как сделать на одну колонку, а вот как на две?
.columns{
column-width: 200px;
column-count: 2;
column-gap: 30px;
column-rule: 4px solid #ccc;
}
.columns:first-letter {
font-size: 2em; /* Размер буквы */
color: red; /* Цвет буквы */
float: left; /* Выравнивание по левому краю */
margin: 0 4px 2px 0; /* Отступы вокруг буквы */
}<div class="columns">
Стоял солнечный день. Небо голубое, птицы поют. За зелёными кустами кто-то прятался, было хорошо слышно шелест сочных зелёных листьев. Там сидел маленький крольчонок и мирно пожёвывал травку, одуванчики, клевер и листочки. Заметив меня, он заторопился и, дожевав последний лист, ринулся в сторону леса. Только и видно было, как он заскочил в дальние кусты, слышно было громкий шелест и чириканье, и как множество маленьких птичек выпорхнуло из-за кустов, и эта небольшая стайка скрылась за высокими деревьями.
</div>Ответы (1 шт):
Автор решения: Fr3z0n
→ Ссылка
ul {
list-style: none;
display: flex;
}
li {
margin-left: 20px;
width: 200px;
}
li:first-letter {
font-size: 2em;
color: red;
float: left;
margin-bottom: -5px;
}<ul>
<li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In possimus, accusamus porro quo maxime quibusdam ipsum quod ullam facere tenetur.</li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nulla doloribus quia numquam sed autem explicabo nisi accusantium voluptas ab.</li>
</ul>