CSS: поддерживать плавающую очистку и очистку nth-дочерних объектов, если элементы отображаются: нет

Question 1

Это сложно и сложно объяснить, поэтому я создал jsfiddle, чтобы визуализировать свою проблему.

У меня есть сетка элементов, где каждый четвертый элемент очищается слева clear:left.

У меня есть переключатель (в моем реальном случае фильтр), который скрывает некоторые из этих плавающих элементов, и я хочу переместить остальные вверх и по-прежнему поддерживать сетку 4 на 4.

<div class="item"> 1 </div>
<div class="item"> 2 </div>
…

.item:nth-of-type(4n+1) { clear: left; }

См. Этот пример: http://jsfiddle.net/K4rXM/

При нажатии кнопки «Сделать!» ссылка правило nth-of-type как бы игнорируется. Внезапно все элементы всплывают влево, и после 4-го элемента нет четкости.

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

Есть какие-нибудь идеи и советы для меня? Заранее спасибо, Мэтт

css css-float responsive-design css-selectors

1

matt 9 Дек 2012 в 16:14

Пробовали спрятаться с помощью .hide и использовать :not(.hide)?

–

mreq

9 Дек 2012 в 16:22

Он по-прежнему считает скрытые, но поскольку они скрыты, они не влияют на поток.

–

Rick Calder

9 Дек 2012 в 16:33

Да, я пробовал, но безрезультатно. Ничего не меняет!

–

matt

9 Дек 2012 в 18:28

Answer

$('#test').click(function(e) {
e.preventDefault();
$('.item').hide();
$('.call').show();
$('.item:visible').each(function (i) {
if (i % 4 == 0) $(this).addClass('clearLeft');
});
});


.clearLeft{clear:left;}

Как и в моем комментарии, он все еще считает скрытые div, вы должны проверить, какие из них видны, а затем применить класс. http://jsfiddle.net/calder12/K4rXM/4/

2

Rick Calder 9 Дек 2012 в 16:37

Спасибо, но как я могу применить тот же принцип к моему реальному примеру? Есть идеи по этому поводу?

–

matt

9 Дек 2012 в 18:27

Предоставленная мной скрипка применяется к вашему примеру, просто добавьте функцию щелчка jquery к событию щелчка vortraege no?

–

Rick Calder

9 Дек 2012 в 18:30

В этом случае вам нужно будет принять во внимание событие изменения размера окна и изменить место применения класса в зависимости от размера окна. На самом деле вам нужно сделать это только для 4 и 2 столбцов.

–

Rick Calder

9 Дек 2012 в 18:39

jsfiddle.net/calder12/K4rXM/6 Обновлено с учетом размера окна. Вам нужно будет настроить точку, в которой событие срабатывает, очевидно, 640 является приблизительным, чтобы событие работало в jsfiddle.

–

Rick Calder

9 Дек 2012 в 18:50

Спасибо, но у меня есть последняя проблема, связанная с недоразумением. Ваш код ( i % 4 == 0 ) применяет .clearLeft к каждому 4-му элементу. Однако, как вы можете видеть в моем «живом» примере, при нажатии на слово «Vorträge» элементы даже не всплывают, как положено. У меня есть "перерыв" после 2-го пункта, как я могу его переместить?

–

matt

9 Дек 2012 в 20:40

Question 2

$('#test').click(function(e) {
e.preventDefault();
$('.item').hide();
$('.call').show();
$('.item:visible').each(function (i) {
if (i % 4 == 0) $(this).addClass('clearLeft');
});
});


.clearLeft{clear:left;}

Как и в моем комментарии, он все еще считает скрытые div, вы должны проверить, какие из них видны, а затем применить класс. http://jsfiddle.net/calder12/K4rXM/4/

2

Rick Calder 9 Дек 2012 в 16:37

Спасибо, но как я могу применить тот же принцип к моему реальному примеру? Есть идеи по этому поводу?

–

matt

9 Дек 2012 в 18:27

Предоставленная мной скрипка применяется к вашему примеру, просто добавьте функцию щелчка jquery к событию щелчка vortraege no?

–

Rick Calder

9 Дек 2012 в 18:30

В этом случае вам нужно будет принять во внимание событие изменения размера окна и изменить место применения класса в зависимости от размера окна. На самом деле вам нужно сделать это только для 4 и 2 столбцов.

–

Rick Calder

9 Дек 2012 в 18:39

jsfiddle.net/calder12/K4rXM/6 Обновлено с учетом размера окна. Вам нужно будет настроить точку, в которой событие срабатывает, очевидно, 640 является приблизительным, чтобы событие работало в jsfiddle.

–

Rick Calder

9 Дек 2012 в 18:50

Спасибо, но у меня есть последняя проблема, связанная с недоразумением. Ваш код ( i % 4 == 0 ) применяет .clearLeft к каждому 4-му элементу. Однако, как вы можете видеть в моем «живом» примере, при нажатии на слово «Vorträge» элементы даже не всплывают, как положено. У меня есть "перерыв" после 2-го пункта, как я могу его переместить?

–

matt

9 Дек 2012 в 20:40

CSS: поддерживать плавающую очистку и очистку nth-дочерних объектов, если элементы отображаются: нет

1 ответ

Похожие вопросы

Новые вопросы

css