Как div’ами разделить на 3 столбца?

Использую следующий код:

// разделить содержимое по тегу more и вернуть массив
function split_content() {
    global $more;
    $more = true;
    $content = preg_split('/<span id="more-\d+"><\/span>/i', get_the_content('more'));
    for($c = 0, $csize = count($content); $c < $csize; $c++) {
        $content[$c] = apply_filters('the_content', $content[$c]);
    }
    return $content;
}

// вернуть оригинальный контент
// the_content('<p>Read the rest of this page &raquo;</p>');
// разделить содержимое на массив
$content = split_content();
// вывести первый раздел контента в column1
echo '<div id="column1">', array_shift($content), '</div>';
// вывести оставшиеся разделы контента в column2
echo '<div id="column2">', implode($content), '</div>';

Это получает только два столбца. Как я могу получить третий столбец div?

2 295 columns

Ответов: 2

kaiser 02.02.2019 в 13:12

С помощью показанной выше функции split_content () невозможно создать макет из трех столбцов. Он в основном разбивает содержимое с помощью тега  на две части, а затем строит два столбца (довольно сложным образом).

Возможно, он работает с добавлением нескольких тегов  к содержимому публикации в HTML-редакторе.

Ответить

Phife Dawz 10.02.2019 в 17:49

Вот пример:

function my_multi_col_v2($content){
// выполнить пару важных задач для подготовки контента
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]&gt;', $content);

// первое «more» преобразуется в диапазон с идентификатором
$columns = preg_split('/(<span id="more-d+"></span>)|(<!--more-->)</p>/', $content);
$col_count = count($columns);

if($col_count > 1) {
    for($i=0; $i<$col_count; $i++) {
        // проверьте, есть ли окончательный вариант '', если нет, добавьте его
        if(!preg_match('/</p>s?$/', $columns[$i]) )  {
            $columns[$i] .= '</p>';
        }
        $columns[$i] = preg_replace('/^s?</p>/', '', $columns[$i]);
        // добавить div wrapper
        $columns[$i] = '<div class="dynamic-col-'.($i+1).'">'.$columns[$i].'</div>';
    }
    $content = join($columns, "n").'<div class="clear"></div>';
}
else {
    // эта страница не имеет динамических столбцов
    $content = wpautop($content);
}
// удалить все пустые теги
$content = str_replace('<p></p>', '', $content);
return $content;

}

замените свой тег the_content () следующим кодом:

$content = get_the_content('',FALSE,'');

echo my_multi_col_v2($content);

Add CSS:

div.dynamic-col-1 { float: left; width: 38%; padding-right: 2%;}
div.dynamic-col-2 { float: left; width: 38%;padding-right: 2%;}
div.dynamic-col-3 { float: left; width: 20%;}
div.clear { clear: both; }

добавьте два тега  в содержимое вашего поста / страницы, чтобы создать три столбца.

Ответить

Добавить ответ