Столбцы HTML5, CSS3

Question

Сей все, создавая агрегатор новостей с SimplePie, элементы SP работают нормально, но я хотел бы, чтобы каналы, которые он извлекает, отображаются в столбцах по странице с помощью HTML5 и CSS3. Мне удалось реализовать его так, чтобы столбцы были сформированы и отображали фиды, но в настоящий момент истории упорядочиваются друг на друга слева направо, причем новейшая отображается в верхнем левом углу, вторая - первая слева в колонке 1 и так далее. Я бы хотел, чтобы рассказы отображались слева направо по столбцу, так что новейший находится в верхней части первого столбца, второй - в верхней части второго столбца, третий - в третьем столбце и скоро.

Код, Im, используя в данный момент выглядит следующим образом:

<div id="page-wrap"> 




    <?php if ($feed->error): ?> 
    <p><?php echo $feed->error; ?></p> 
<?php endif; ?> 

<?php foreach ($feed->get_items() as $item): ?> 

    <div class="chunk"> 

     <h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4> 

     <p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p> 

    </div> 

<?php endforeach; ?> 

И это CSS:

#page-wrap { 
width: 100%; 
margin: 25px auto; 
height:400px; 
text-align: justify; 
-moz-column-count: 3; 
-moz-column-gap: 1.5em; 
-moz-column-rule: 1px solid #c4c8cc; 
-webkit-column-count: 3; 
-webkit-column-gap: 1.5em; 
-webkit-column-rule: 1px solid #c4c8cc; 
} 

Если кто-то может помочь мне с этим, что было бы здорово ,

Answer 1

Вы пытаетесь заставить колонки CSS3 вести себя как обычные div, это раздует ваш код css и затруднит его поддержание. Но вы хотите получить ответ, а не семантику лекции, поэтому решение таково:

h4 { 
    -moz-column-break-before : always; 
    -webkit-column-break-before : always; 
} 

Answer 2

Тогда вам не нужны столбцы. Вы просто поместите ссылки один за другим.

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

Могут быть другие примеры.