Как 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?

Понравился вопрос? Нужен ответ? Поддержите проект
WPAsk
Ответов: 2
  1. kaiser

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

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

  2. Phife Dawz

    Вот пример:

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

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: