Есть ли способ использовать чисто CSS для создания столбцов отдельно?

В проекте, над которым я работаю, есть несколько мест, где есть два столбца текста. Поскольку это контент управляемый, я действительно не хочу создавать две отдельные области текста для заполнения пользователем, а скорее те, которые я разделил на два столбца с column-count: 2 в CSS. Содержимое будет находиться внутри одного элемента p.Есть ли способ использовать чисто CSS для создания столбцов отдельно?

Проблема в том, что мне нужно немного поменять второй столбец по-другому. Мне нужно изменить text-align вправо, удерживая первую колонку text-align слева.

Я знаю, что могу сделать это на PHP и/или JavaScript, но я бы предпочел сделать это, используя CSS, если это возможно.

Markup:

<div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p> 
</div> <!-- /.content -->

CSS:

.content p { 
    column-count: 2; 
}

источник

2017-02-03 Daniel Dewhurst

текущий код Пожалуйста –

@ImmortalDude только один 'p' элемента с текстом внутри. –

как @sahildhir сказал, нам нужен ваш текущий код, что вы пробовали и т. Д. –

На данный момент нельзя использовать целевые столбцы в чистом CSS. Самое близкое, что вы можете получить, это использовать JavaScript, чтобы разбить его на новые элементы или изменить разметку.

Это было так же предложено до: https://stackoverflow.com/a/21238260/271271

источник

2017-02-03 11:03:23 Mike

Точно такой же ответ ... Невозможно настроить таргетинг на столбцы, как сейчас. Вот подробности о процедурах colum- http://www.w3schools.com/css/css3_multiple_columns.asp –

Я знаю, поэтому я связался с ним. – Mike

Надеюсь, поддержка добавится в CSS в какой-то момент. На данный момент я, вероятно, займусь PHP-подходом, просто из-за моих требований. JS также будет работать хорошо, как объясняется в связанном ответе. –

-3

Вы можете попробовать использовать это:

table.secondcolumn td:nth-child(2) { text-align: left; }

or alternatively try this SO link

EDIT/Update: По-видимому, прямых стилей (через CSS) нет, чтобы создать конкретный текстовый столбец с помощью CSS.

источник

2017-02-03 11:01:26 bbh

Это не таблица ... – Mike

Есть ли способ использовать чисто CSS для создания столбцов отдельно?

ответ

Смежные вопросы