Выравнивание плавающих элементов переменной высоты внутри слоя фиксированной ширины на дне друг друга без полей или пробелов между рядами - PullRequest
Новая
       18

Выравнивание плавающих элементов переменной высоты внутри слоя фиксированной ширины на дне друг друга без полей или пробелов между рядами

0 голосов
/ 17 января 2012

У меня есть серия UL, сгенерированная следующим кодом PHP: 

$groups = array();
foreach ($related->posts as $post) {
    $groups[$post->post_type][] = $post;
    }
foreach ($groups as $name => $posts) {
    printf('<ul class="related-group related-%s ">', htmlspecialchars($name));
    foreach ($posts as $post) {
        printf('<li class="related-item"><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></span><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></span></li>');
    }
echo '</ul>';
}
  • Количество UL будет варьироваться.
  • Каждый UL имеет переменное число LI (высота) и фиксированной ширины.
  • Каждый UL перемещается влево в контейнере фиксированной ширины DIV.
  • Вероятно, будет максимум две строки плавающих UL с переменной длиной.

Теперь проблема в том, что таким образом HTML-код, сгенерированный вышеприведенным PHP, будет создавать строки, в которых элементы UL будут складываться в нижней части поля, установленного самым высоким UL из строки выше.То, что я хочу, это складывать UL в нижней части друг друга без полей.

Этот jsfiddle иллюстрирует мою проблему: http://jsfiddle.net/5d5eM/

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

Возможно, есть какое-то решение javascript / jquery ... но я его не знаю.Любое предложение?

спасибо!

ps - это репост из вопроса, первоначально размещенного здесь: Размещать неупорядоченные списки (UL) рядом друг с другом и складывать их вв нижней части друг друга, без полей и пробелов причина, по которой я разместил репозиторий, заключается в том, что я понял из любезных ответов, учитывая, что это невозможно сделать с помощью простого CSS, так как мой код генерируется PHP и есть некоторые переменные,Вопрос, опубликованный ранее, стал немного беспорядочным из-за правок и других поднятых вопросов, поэтому я подумал о том, чтобы очистить его и повторить его еще раз.

Ответы [ 2 ]

1 голос
/ 18 января 2012

Я решил проблему с jQuery Masonry, плагином jQuery

http://masonry.desandro.com/

Я не уверен, есть ли лучшие способы сделать это, но этот только что работал

также Йоши из этой темы сообщил о Isotope, другом плагине jQuery, который похож на Masonry, но я еще не тестировал: http://isotope.metafizzy.co/

спасибо, что прочитали и зашли на

1 голос
/ 17 января 2012

Я не знаю php, но я пытаюсь сделать эту работу. Начнем отсюда. 

   $groups = array();
    foreach ($related->posts as $post) {
        $groups[$post->post_type][] = $post;
    }

Получите размер $ групп здесь. например $ sizeof_groups = sizeof ($ groups);

Если вы поделите $ sizeof_groups на 4 (вы сказали, что вам нужно четыре столбца), вы получите количество строк, которое вам понадобится. например, если $ sizeof_groups равен 4 (4 неупорядоченных списка), вам просто нужна 1 строка.

so $ numberOfRows = $ sizeof_groups / 4;

Остаток тоже может быть. Если есть, нам понадобится еще один «ряд». 

if($sizeof_groups % 4 != 0 )
    $numberOfRows++;

Теперь 

for(i=0 ; i<=4 ; i++) // you need four columns
{
    echo '<div class="myDiv">';
        for(j=0 ; j<=$numberOfRows; j++)
        {

              foreach ($groups as $name => $posts) {
                   printf('<div><ul class="related-group related-%s ">',                     htmlspecialchars($name));
                   foreach ($posts as $post) {
                         printf('<li class="related-item"><span><a                   href="'.get_permalink($post->ID).'" rel="permalink">'.get_the_post_thumbnail($post->id, '32').'</a></span><span><a href="'.get_permalink($post->ID).'" rel="permalink">'.$post->post_title.'</a></span></li>');
    }
echo '</ul></div>';
}
echo '</div>';


}

СТАРЫЙ КОММЕНТАРИЙ:

Полагаю, вы можете настроить свой php-код для отображения двух списков в одном div. Надеюсь, это поможет:

HTML: 

<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
</div>

</div>



<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>

</div>


<div class="myDiv">
<div>
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
</div>

<div>
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
    </ul>
</div>

</div>

CSS: 

div {
   width: 50px;
    border: 1px solid #000;
    float: left;
}

.myDiv{
     width: 50 px;   
    float left;

}


br { clear: left; }
...