@egsi

Как сделать текст в три колонки на сайте?

Есть три абзаца с текстом. Как сделать, чтобы они были в три колонки на сайте? Верстка делается под старый браузер, который не поддерживает современные теги
  • Вопрос задан
  • 4281 просмотр
Пригласить эксперта
Ответы на вопрос 7
Madeas
@Madeas
UI / UX Designer, Frontend Developer
используйте flexbox для родителя. типа так,
<div style='display:flex'>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
</div>
Ответ написан
iNickolay
@iNickolay
<style>
body { font-size: 16px; }
.row { font-size: 0; }
.row .col-4 {
  display: inline-block;
  font-size: 1rem;
  width: 33.3%;
}
</style>

<div class="row">
  <div class="col-4">1</div>
  <div class="col-4">2</div>
  <div class="col-4">3</div>
</div>
Ответ написан
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Верстка делается под старый браузер

насколько старый? Если очень - таблицы
Ответ написан
Комментировать
@Nifontov
Сделать это можно вот таким образом

https://codepen.io/anon/pen/vzYPrx
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Вот так: https://jsfiddle.net/qe1g2Ljv/
p {
  display: inline-block;
  width: 30%;
  font-size: 1rem;
}
p:not(:nth-child(3n)) {
  margin-right: 3%;
}
Ответ написан
Комментировать
@Alhimik1
659c425a8fec1311450877.jpeg
Сделал как в первом примере, но мне нужно, чтобы был нумерованный список в три колонки, но в нумерованном списке, в каждой колонке, список начинается с 1 (единицы), мне к сожалению нужно с продолжением от первого столбца (больше для СЕО нужно, если я не ошибаюсь).
А простая нумерация растягивает вниз экран с большим пробелом сбоку – не красиво.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы