HTML5, CSS3 столбцы - PullRequest
Новая
       1

HTML5, CSS3 столбцы

0 голосов
/ 15 января 2011

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

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

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

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

Ответы [ 2 ]

4 голосов
/ 15 января 2011

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

h4 { 
  -moz-column-break-before : always;
  -webkit-column-break-before : always;
}
1 голос
/ 15 января 2011

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

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

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

...