Ответ 1

Вы можете добиться желаемого результата, используя только PHP, HTML, CSS-решение, которое вы уже используете:

PHP

$i=1;
echo '<a class="LibSectOpen">
<span style="display:none" class="SectionName">'.$Section.'</span>
<div class="LibrarySects"><div class="LibrarySectsHeader">'.$Section.'</div>
<div class="LibrarySectsShelf"><div class="move_right">';
while($row = mysql_fetch_array($log2)){ 
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
      title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i%5==0)
{
    echo '</div><div class="move_right">';
}
$i++;
}
echo '</div></div></div></a>';

В приведенном выше коде используется <div class="move_right"> ... </div> для разделения элементов в группе из 5, чтобы отобразить каждую группу в новом столбце.

CSS (.move_right)

.move_right{
    display:inline-block;
    vertical-align:top;
}

Скрипт того, как сформированный HTML-вывод будет

Ответ 2

Я предоставил вам 2 решения здесь: PHP и CSS, поскольку @ariel уже внедрил решение jQuery, так как мне всегда нравится быть независимым от JS, а также он спасет вас, используя сторонний script, вместе с библиотекой jQuery (если вы не используете jQuery), сначала я сначала использовал PHP, а не CSS, который может быть менее совместим с точки зрения IE.

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

Предположим, что у нас есть элемент array, и мы хотим установить точно так, как вам это нужно.

<div class="wrapper">
    <ul>
        <?php
            $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
            $counter = 0;
            foreach ($arr as $value) {
                if($counter%5==0 && $counter != 0){ echo "</ul><ul>";}
        ?>
            <li><?php echo $value; ?></li>
        <?php
                $counter++;
            }
        ?>
    </ul>
</div>

Здесь я использую переменную счетчика, которая увеличивается в конце цикла, строка здесь $counter%5==0 в if указывает, что если счетчик циклов делится на 5, добавьте </ul><ul>, следовательно, это приведет к созданию группы из ul, которые будут перемещаться на left.., состоящие из 5 li каждый.

Демо - Код скрипта

CSS

* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper {
    height: 150px;
    margin: 50px;
    border: 1px solid #eee;
}

ul {
    float: left;
    list-style-type: none;
}

ul li {
    height: 30px;
    width: 150px;
    background: tomato;
    border: 1px solid #515151;
}

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

Демо - Код скрипта

<a class="LibSectOpen">
    <span style="display:none" class="SectionName"><?php $value; ?></span>
    <div class="LibrarySects"><div class="LibrarySectsHeader">Whatever</div>
        <div class="LibrarySectsShelf">
            <div class='inner_wrap'>
            <?php
                $arr = array('1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');
                $counter = 0;
                foreach ($arr as $value) {
                    if($counter%5==0 && $counter != 0){ echo "</div><div class='inner_wrap'>";}
            ?>
                <div class="LibrarySectsShelf_Book" title="Author:">Whatever <?php echo $value; ?></div>
            <?php
                    $counter++;
                }
            ?>
            </div>
        </div>
    </div>
</a>

Выполняя то же самое с CSS, вы можете использовать свойство column-count, но, насколько это касается IE, это создаст беспорядок. хотя, если вы заинтересованы в решении, чем здесь вы идете...

Демо

HTML

<ul>
   <li>1</li>
   <!-- More incremented li -->
</ul>

CSS

ul {
    list-style-type: none;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

Для справки о поддержке нескольких столбцов

Ответ 3

Мое решение включает jQuery и плагин Columnizer.

Здесь рабочая скрипка: http://jsfiddle.net/bortao/qGfsr/

Код очень прост:

$('.LibrarySectsShelf').columnize({
    width: 166,
    height: 150,
    doneFunc: function () {
        $('.LibrarySectsShelf_Book').removeClass('hidden');
    }
});

Единственное изменение в вашем css - это новый класс:

.hidden {
    visibility: hidden
}

Который должен быть добавлен к каждому LibrarySectsShelf_Book. Это делается исключительно для предотвращения мерцания неорганизованных предметов. Класс удаляется после завершения столбца.

Ответ 4

Легко.

.LibrarySectsShelf {writing-mode: vertical-lr;}
.LibrarySectsShelf_Book {display: inline-block;}

Работает в каждом браузере, который я тестировал, несмотря на то, что страницы wiki утверждали иначе, и это было вокруг с IE8.

Ответ 5

Решение, использующее только CSS

Лучший способ сделать это - использовать flex-фреймы CSS3 следующим образом:

Вот как:

В CSS добавьте эти 3 строки в .LibrarySectsShelf{ ... }

.LibrarySectsShelf {
   display: flex;               // to add
   flex-flow: column wrap;      // to add
   align-content: flex-start;   // to add

   ... // the rest of your code
}

и 1 строка в .LibrarySectsShelf_Book{ ... }

.LibrarySectsShelf_Book{ 
   flex: 0 0 23px;

   ... // the rest of your code
}

Поддержка кросс-браузера

Обратите внимание, что поскольку Flex-блок является новой функцией в CSS3, вам может потребоваться добавить некоторые префиксы браузера, такие как -webkit-, -moz- и -ms-, чтобы он работал правильно во всех основных браузерах.

Также обратите внимание, что функция переноса гибких окон доступна только в Firefox 28 и новее.

Рабочий пример кросс-браузера доступен на http://jsfiddle.net/29Cmz/

Почему Flexbox

Поскольку он очень гибкий, он заполняет все доступное пространство, и вам не нужно жестко указывать количество строк в PHP/JavaScript.

Ответ 6

Я считаю, что это может быть полезно Элементы списка HTML сверху вниз, затем слева направо Jsfiddle показывает, что если вы хотите сделать это с помощью css, вы можете использовать столбцы css. В противном случае ниже приведен ответ на js-плагин для этого. В качестве альтернативы вы можете просто позиционировать, когда создаете контент на PHP, если это возможно.

Ответ 7

Мне кажется, что вам не нужна полная ширина вашего основного контейнера. Почему бы вам просто не добавить фиксированную ширину к обоим категориям и установить их в display:inline; или display:inline-block (все еще испортить эти два... sry).

Если вы хотите определить его динамически, вы можете проверить погоду, чтобы высота вашего основного контейнера была достаточной для обеих категорий. Если это не так, вы можете установить атрибуты css для обеих категорий (я надеюсь, что у вас будет такой же класс css;) с помощью

$('.your-class').css({'width':'250px', 'display':'inline'});

Я думаю, что это должно делать магию.

РЕДАКТИРОВАТЬ: Ах, черт. didnt видеть ваш код... Тем не менее он должен работать таким образом;)

Ответ 8

Прежде всего. Не помещайте div в тег. Затем вы можете найти array_chunk php-функцию. Итак, что вам нужно делать. Будет лучше, если вы используете PDO. PDO fetch all вернет array;

 <?php 
        $chunkSize = 5; // or any other value you need
        $chunks = array_chunk($result_array,$chunkSize);

           foreach($chunks as $links_array):?>
               <div class="move_right">
                  <?php foreach($links_array as $link):?>
                        <!-- your link code -->
                  <?php endforeach; ?>
               </div>
    <?php  endforeach ?>

Ответ 9

Следующий код определяет конец div и создает новый столбец с помощью css.

var col = 1;
jQuery(
  function($)
  {
    $('#flux').bind('scroll', function()
          {
            if($(this).scrollTop() + 
               $(this).innerHeight()
               >= $(this)[0].scrollHeight)
                  {
                      $("#yourdiv").css("-moz-column-count",col);
                      $("#yourdiv").css("-webkit-column-count",col);
                      col++;
                  }
         })
    }
);

Ответ 10

Тонны больших ответов здесь, Я голосую за решение javascript/CSS ONLY, потому что.

1) PHP остается исключительно ответственным за получение данных для отображения (повторите использование той же логики php для новых презентаций в будущем)

2) Javascript и CSS могут быть гибкими, чтобы обеспечить персонализированную компоновку разметки для каждого устройства, браузера и размера представления

DEMO: http://jsfiddle.net/9Bc76/1/

Разметка. Пусть PHP просто сгенерирует элементы и забывает о презентации.

<div class="container">
   <div class="item">An Item</div>
   <div class="item"> An Item</div>
   <div class="item">An Item</div>
   ....

Javascript для обертывания элементов (вот жесткий код за 5 элементов) - использование селектора jquery и wrapAll.

var items = $(".item");
for(var i = 0; i < items.length; i+=5) {
    items.slice(i, i+5).wrapAll('<div class="wrapper"></div>');
}

CSS для макета

.wrapper { display:inline-block; float:left; }
/* clear the float so the container keeps 'containing' */
.container:last-child:after { 
      clear:both; display:block;visibility:hidden; 
      height:0; content:"."; }

Что это.

Дополнительно, если нам нужно, чтобы наш "счетчик обходов" был динамическим, мы можем сделать некоторые вычисления на основе высоты .item и высоты .container, чтобы получить желаемый счетчик "wrap".

Предположим, что контейнер имеет фиксированную высоту, которая не разрешается расти;

.container { height: 300px; width: 100%; overflow: hidden; }

Javascript может динамически обнаруживать "интервал подсчета" (найти, как элементы могут соответствовать высоте контейнера)

var containerheight = $(".container").height(),
itemheight = $(".item").height();

var wrapinterval = Math.floor(containerheight/itemheight);

Теперь мы можем использовать

var items = $(".item");
for(var i = 0; i < items.length; i+=wrapinterval) {
    items.slice(i, i+wrapinterval).wrapAll('<div class="wrapper"></div>');
}

DEMO с интервалом динамического переноса - http://jsfiddle.net/2paNY/2/

Применяется к другим SO'ers, если в этом есть части, которые уже были обработаны так или иначе, я просто набрал текст

Ответ 11

Просто скопируйте и вставьте этот фрагмент кода и попробуйте в конце и используйте логику.

<?php
for($i = 1; $i <= 20; $i++){
if($i % 5 == 1){
echo '<div style="float:left;">';
}
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
      title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';

if($i % 5 == 0){
echo '</div>';
}
}
?>