Список не отображается как сетка с длинными текстами

Question

У меня проблема с сортировкой, в основном это будет список с иконками и текстом ниже. Размер значка остается прежним, а текст - нет, как показано на рисунке

.

Проблема в том, что <li> содержит много текста, а остальные плавают справа от него. Как я могу разобраться в этом.

Мой код ниже:

ul.iconifier {
width: 100%;
list-style: none;
margin: 0 auto; padding: 0;
}
ul.iconifier li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
width:8em;
height:200px;
-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
display: block; /*--IE6 Fix--*/
height:101%;
}

ul.iconifier li a.thumb{ 
width: 128px;
height: 128px;
overflow: hidden;
display: block;
cursor: pointer;

}
ul.iconifier li a.thumb:hover {

}
ul.iconifier li p {
font: normal 0.75em Verdana, Arial, Helvetica, sans-serif;
margin: 0; padding: 10px 5px;
background: #f0f0f0;
border-top: 1px solid #fff; /*--Subtle bevel effect--*/
text-align:center;
width:118px;

}

ul.iconifier li a {text-decoration: none; color: #777; display: block;}

HTML:

<ul class="iconifier">
<li>
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a>
    <p><a href="#">English Depatment</a></p>
</li>
<li>
    <a href="#" class="thumb" title="art"><img src="img/sprite.png"  alt="Art" /></a>
    <p><a href="#">Art Deptartment</a></p>

</li>
<li>
    <a href="#" class="thumb" title="Travel and Tourism"><img src="img/sprite.png" alt="Travel and Tourism" /></a>
    <p><a href="#">Mathematics</a></p>
</li>
    <li>
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a>
    <p><a href="#">Business Studies</a></p>
</li>
<li>
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a>
    <p><a href="#">English Depatment with a really long title that will hopefully fall</a></p>
</li>
<li>
    <a href="#" class="thumb" title="art"><img src="img/sprite.png"  alt="Art" /></a>
    <p><a href="#">Art Deptartment</a></p>

</li>
<li>
    <a href="#" class="thumb" title="Travel and Tourism"><img src="img/sprite.png" alt="Travel and Tourism" /></a>
    <p><a href="#">Mathematics</a></p>
</li>
    <li>
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a>
    <p><a href="#">Business Studies</a></p>
</li>
<li>
    <a href="#" class="thumb" Title=""><img src="img/sprite.png" alt="Contacts" /></a>
    <p><a href="#">English Depatment</a></p>
</li>
<li>
    <a href="#" class="thumb" title="art"><img src="img/sprite.png"  alt="Art" /></a>
    <p><a href="#">Art Deptartment</a></p>

</li>
</ul>

Answer 1

Вам нужно использовать display: inline-block; вместо float, чтобы заставить их сдвинуть строку под ними для современных браузеров. Для IE6 и IE7 используйте display: inline.

Замените ваш ul.iconifier li на этот код:

        ul.iconifier li
    {
        margin: 10px;
        padding: 0;
        text-align: center;
        border: 1px solid #ccc;
        width: 8em;
        -moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        -webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
        display: -moz-inline-box; /* mozilla only */
        display: inline-block; /* for browsers that support display:inline-block*/
        vertical-align: top;
    }

Затем добавьте этот код, чтобы IE6 и IE7 работали:

   /* Show only to IE7 */
    *:first-child + html ul.iconifier li
    {
        display: inline;
    }
    /* Show only to IE6 */
    * html ul.iconifier li
    {
        display: inline;
    }

---

Я изучаю этот подход на следующих сайтах:
http://gtwebdev.com/workshop/layout/inline-block-gallery.php
http://www.css -lab.com / демки / изображение-дисплей / встроенный блок-caption.html

Answer 2

есть два способа, которыми первый использует css, установив фиксированную высоту для маленьких блоков с обрезанным текстом до фиксированной длины второе решение использует код разработки на стороне сервера, добавляя чистый стиль к первому LI в строке (примечание: это решение для фиксированного номера блоков в строке)

Answer 3

Возможно, вы можете использовать http://plugins.jquery.com/project/gridLayout

Answer 4

Не идеально, но вы можете сделать элементы одинакового размера, чтобы у вас никогда не возникало проблем с перемещением вправо.

Попробуйте добавить это в свой CSS:

ul.iconifier li 
{
    margin-bottom: -5000px;
    padding-bottom: 5000px;
}

Этот CSS должен сделать элементы одинаковой высоты.

Ура, Шон