Группа левых элементов с фиксированной шириной внутри контейнера - странное поведение (нерегулярный переход к следующей строке?) - PullRequest
Новая
       18

Группа левых элементов с фиксированной шириной внутри контейнера - странное поведение (нерегулярный переход к следующей строке?)

0 голосов
/ 10 мая 2011

У меня есть группа div, которые я хочу расположить в 4 столбца.Я создал правила CSS, чтобы у первого элемента было левое и правое поле, у следующих двух - только правое поле, а у четвертого элемента в строке нет левого или правого поля: 

article.participants-thumbnail {
    width: 180px;
    float: left;
    margin-right: 73px;
    margin-bottom: 73px;
}

article.participants-thumbnail:nth-of-type(4n) {
    margin-right: 0;
}

article.participants-thumbnail:nth-of-type(4n+1) {
    margin-left: 18px;
    margin-right: 73px;
}

Он работал отлично, но по какой-то причине 5-й (1-й элемент строки 2) теперь полностью находится в своем собственном ряду.

В jsfiddle он работает правильно: http://jsfiddle.net/waffl/dJEYF/embedded/result/

Спасибо!

-

Обновление

В соответствии с рекомендацией комментария, работает следующее css: 

article.participants-thumbnail {
    width: 180px;
    float: left;
    margin-right: 73px;
    margin-bottom: 73px;
}

article.participants-thumbnail:nth-of-type(4n) {
    margin-right: 0;
}

article.participants-thumbnail:nth-of-type(4n+1) {
    margin-left: 18px;
    margin-right: 73px;
    clear: both;
}

1 Ответ

1 голос
/ 10 мая 2011

Обычно, когда плавающий div ведет себя странно, это потому, что стиль clear: both; должен быть добавлен между каждой логической строкой плавающих элементов.

...