CSS выравнивание абзацев по горизонтали

Question

CSS выравнивание абзацев по горизонтали

0

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

Я использовал float: right; , который сделал их столбцами, но затем он вывел их из форматирования с остальной частью веб-страницы.

Любые советы по разным способам создания столбцов или форматирование с помощью float были бы оценены.

Kevin Kesicki 24 март 2014, в 19:11

Источник

0

Сами абзацы не должны быть столбцами. Используйте элемент обтекания.
Diodeus - James MacFarlane 24 март 2014, в 18:07

Теги:

html

css

1 ответ

Ещё вопросы

Сами абзацы не должны быть столбцами. Используйте элемент обтекания.

robbclarke · Answer 1 · 2014-03-24T15-07-00.000Z

Вы всегда можете использовать столбцы CSS.

div
{
   -webkit-column-count:3; /* Chrome, Safari, Opera */
   -moz-column-count:3; /* Firefox */
   column-count:3;
   -webkit-column-gap:40px; /* Chrome, Safari, Opera */
   -moz-column-gap:40px; /* Firefox */
   column-gap:40px;
}

Из W3schools.

Или вы можете сделать это с элементами списка, если вы всегда будете контролировать текст.

HTML

<ul>
    <li>paragraph</li>
    <li>paragraph</li>
    <li class="last">paragraph</li>
</ul>

CSS

ul {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    float: left;
    width: 30%
    margin-right: 5%;
}

ul li.right {
    margin-right: 0;
}

это имеет интересный результат. Есть 3 абзаца, которые я хочу сделать в столбцах. Перед вашим кодом они просто накладывались друг на друга. После ввода вашего кода я получил сетку текста. Верхние 3 квадрата - это текст первого абзаца, средние 3 - второй абзац, нижний - третий. Итак, ваш код работал, давая мне столбцы, но я хочу, чтобы каждый абзац имел свой собственный столбец. Есть идеи, как это будет работать?