WordPress Разделить абзац на два четных столбца?

Question

Гуру WordPress, мне нужна ваша помощь!:

Разделить один «абзац» на два естественно ровных столбца в PHP относительно легко, но мне нужно выяснить, как разделитьКонкретный контент WordPress в виде двух четных столбцов с изображением сверху, как на рисунке ниже ...

Вот проблема: Текст, показанный на скриншоте выше, представляет собой один абзац с одним изображением, охватывающим всю ширину двух столбцов.Кроме того, один абзац должен быть разбит посередине по слову (а не по символу) и учитывать равномерную высоту между двумя столбцами.Я еще не нашел примеров того, как сделать это с помощью синтаксиса WordPress.

Answer 1

Для автоматических столбцов используйте jQuery, то есть этот плагин http://plugins.jquery.com/plugin-tags/auto-column или др.

Для этого в WP нет встроенной функциональности, и это нужно сделать на уровне DOM,не шаблон страницы или уровень PHP.

Answer 2

Использовать CSS

Посмотрите на css column свойство:

.two-column {
  -moz-column-count: 2;
  -moz-column-gap: 1.5em;
  -moz-column-rule: none;
  -webkit-column-count: 2;
  -webkit-column-gap: 1.5em;
  -webkit-column-rule: none;
  column-count: 2;
  column-gap: 1.5em;
  column-rule: none;
}

Вот Демо из вышеперечисленного.

• Internet Explorer поддерживает эту начиная с версии 10 и выше.
• В этой статье есть дополнительная информация о том, как добавить поддержку других браузеров.

Answer 3

Насколько я понимаю, вы ожидаете разделить тег <p> html, как показано на рис.выше.

Что совершенно невозможно!

Причина в том, что тег <p> является блочным элементом по умолчанию.И чтобы отобразить макет, как показано на рис. Выше, вы должны написать HTML-разметку с помощью CSS, как показано ниже:

<div>
 <img src="ur-img.jpg" />

 <div class="col-2">
  <p class="alignleft"> Text for first column </p>
  <p class="alignright"> Text for second column </p>
  <p class="clear"></p>
 <div>

<div>

И CSS может выглядеть так:

.col-2 p {
    width: 45%
}

.alignright {
    float:right;
}

.alignleft {
    float:left;
}
.clear{
   clear:both;

}

Тема Wordpress по умолчанию предлагает несколько классов CSS - chk http://codex.wordpress.org/CSS