CSS Divs переместил "карты" в Wrap

Question

У меня есть базовая настройка сценария, в которой я пытаюсь поместить div в оболочку. Это работает хорошо, однако простой эффект, которого я пытаюсь достичь, не работает, когда у div'ов есть переменная высота. Я исследовал это, группа попыталась применить clearfix к 3-й карте без успеха. Единственный успех, который у меня был, - это введение еще одного div после 3-й карты в стиле «ясно и то, и другое». Однако это не тот подход, который я хочу использовать, так как я не хочу менять чистую разметку. Мысли о лучшем способе сделать это? Я не против использования простого кусочка JS / jQuery, если это необходимо.

Желаемая:

Ток: http://andrewherrick.com/spike/floatcards/

Answer 1

Решение 1:

Добавьте clear: both к элементам 3n+1, используя .card:nth-child(3n+1) { clear: both } или добавив класс, где это необходимо.

Решение 2:

Вместо float: left на .card используйте display: inline-block; vertical-align: top. Вам также нужно уменьшить margin-right до 16px.

Если вам нужна поддержка IE7, тогда display: inline-block должно быть display:inline-block; *display:inline; zoom:1.

Answer 2

Возможно, я не понимаю вопроса, но не могли бы вы просто добавить «ясно: оба» к 4-й карте?

Answer 3

Используйте селектор :nth-child в сочетании с clear:both.Следующее очистит каждую третью карту.Это будет работать надежно, так как вы используете фиксированную ширину (910 пикселей).

.card:nth-child(3n+1) {
  clear: both;
}

Просто добавьте правило к существующему CSS.Протестировано в Firefox, Chrome и IE: jsfiddle

Answer 4

clear:both с помощью селектора nth-child - это то, что вам нужно.

Вы можете динамически добавлять класс, используя селектор nth-child с jQuery для старых браузеров, которые не поддерживают его изначально: http://api.jquery.com/nth-child-selector/

Answer 5

Раствор 1

Если вы действительно не хотите прикасаться к наценке, вы можете использовать jQuery как таковой (спасибо тридцатке за подсказку):

Jquery

$('.card:nth-child(3n+1)').css('clear','left');

---

Решение 2

Это может быть чище (и более обратно-совместимо), чтобы немного изменить ваш HTML. Возможно, оберните каждую строку в свою собственную обертку, применив к ней очистку.

jsfiddle: http://jsfiddle.net/leifparker/sh4fR/

Вам необходимо добавить CSS-код clearfix. Смотри скрипку.

HTML

<div id="wrap">
    <div class="cards clearfix">
        <div class="card">
            1 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            2 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            3 text text text text text text text text text text text text text text text text
        </div>
    </div>
    <div class="cards clearfix">
        <div class="card">
            4 text text text text text text text text text text text text text text text text
            text text text text text text text text text text
        </div>
        <div class="card">
            5 text text text text text text text text text text text text text text text text
        </div>
        <div class="card">
            6 text text text text text text text text text text text text text text text text
        </div>
    </div>

Answer 6

Вы должны как-то определить «строки». Вы можете установить одинаковую высоту каждого div (таким образом, устанавливая высоту строки), или вы можете установить нулевой разделитель высоты, или вы можете установить clear:left для каждого третьего div, начиная с первого.