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

Question

[egsi]

Есть три абзаца с текстом. Как сделать, чтобы они были в три колонки на сайте? Верстка делается под старый браузер, который не поддерживает современные теги

Answer 1

[Andrej Sharapov]

используйте flexbox для родителя. типа так,

<div style='display:flex'>
<p>абзац</p>
<p>абзац</p>
<p>абзац</p>
</div>

Comments

[egsi]

Можно сделать без flexbox, верстка делается под старый браузер

[Andrej Sharapov]

egsi, тогда можно для абзацов прописать display: inline-block

[Александр Маргинал]

Инлайн блок и js для ширины.
А лучше использовать gulp и аутопрефиксер или что-то похожее что автоматически подстроит под старые. Честно говоря браузера без флексов по моему уже не существует.

А. еще можно использовать фреймворки которые обеспечат корректное отображение на всех актуальных браузерах.

А еще лучше - не писать текст в три колонки.... Это смотрится ужасно...

Я понимаю когда сетка как в G+, но именно текст в три колонки...

[Alhimik1]

<div style="display:flex">
<p>&nbsp;</p>

<p>&nbsp;</p>

<p>1.Корпус.&nbsp; 2.Дверцята завантажувальні та чистки.&nbsp; 3.Дверцята зольника.&nbsp; 4.Клапан подачі повітря.&nbsp; 5.Термометр.&nbsp; 6.Порт під регулятор тяги.&nbsp; 7.Боров.</p>

<p>8.Патрубок подачі опалення.&nbsp; 9.Патрубок повернення опалення.&nbsp; 10.Штуцер для підривного клапана.&nbsp; 11.Патрубок під ТЕН.&nbsp; 12.Водяна оболонка.&nbsp; 13.Конвекційна частина (теплообмінник).</p>

<p>14.Камера згоряння (топка).&nbsp; 15.Кутова планка для колосників.&nbsp; 16.Чавунні колосникові грати.&nbsp; 17.Відбивач.&nbsp; 18.Зольний ящик (відділ). 19. Варильна поверхня.</p>

<p>&nbsp;</p>
</div>


Сделал как в первом примере, но мне нужно чтобы был нумерованный список в три колонки, но в нумерованном списке в каждой колонке список начинается с 1-цы, а мне к сожалению нужно с продолжением от первого столбца (больше для СЕО нужно, если я не ошибаюсь).
А простая нумерация растягивается вниз с большим пробелом сбоку - не красиво.

Answer 2

[Андрей Федоров]

теория:
https://developer.mozilla.org/en-US/docs/Web/CSS/c...

пример:
https://codepen.io/aliencash/pen/YOzgap

поддержка браузерами:
https://caniuse.com/#search=column-count

Comments

[snap44]

Андрей Федоров Nifontov вы дальше заголовков не читаете?

Answer 3

[Николай]

<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>

Answer 4

[Максим Тимофеев]

Верстка делается под старый браузер

насколько старый? Если очень - таблицы

Answer 5

[Nifontov]

Сделать это можно вот таким образом

https://codepen.io/anon/pen/vzYPrx

Comments

[Ankhena]

Думаете много браузеров, которые не поддерживают columns, но поддерживают flex?

[Nifontov]

Ankhena, Вот этот код будет работать в ie 11, куда еще ниже ?

[Ankhena]

Nifontov, Вопрос прочитайте ;)

Answer 6

[Ankhena]

Вот так: https://jsfiddle.net/qe1g2Ljv/

p {
  display: inline-block;
  width: 30%;
  font-size: 1rem;
}
p:not(:nth-child(3n)) {
  margin-right: 3%;
}

Answer 7

[Alhimik1]

Сделал как в первом примере, но мне нужно, чтобы был нумерованный список в три колонки, но в нумерованном списке, в каждой колонке, список начинается с 1 (единицы), мне к сожалению нужно с продолжением от первого столбца (больше для СЕО нужно, если я не ошибаюсь).
А простая нумерация растягивает вниз экран с большим пробелом сбоку – не красиво.