Плавающие div - переменная высота и переменные столбцы - без пробелов

Question

Я ОБНОВЛЕН FIDDLES, СМОТРИТЕ ВНИЗ

Я разрабатываю тему WordPress для работы на iphone, ipads и других устройствах webkit.

Я использую медиа-запросы для изменения ширины div в зависимости от размера и ориентации устройства.

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

Моя проблема в том, что высота плавающего элемента div является переменной. И div, которые выше, чем некоторые, вызывают проблемы с пробелами в плавающих элементах.

Мне нужен возможный совет по исправлению, чтобы никогда не было пробелов, и элементы всегда плавали, даже если на его пути был более высокий div.

Существует ли возможный способ выравнивания высот div до наивысшего div, единственная проблема в том, что он должен работать с изменениями ориентации на iPad. На iPhone все не так плохо, потому что есть только одна колонка. Но на iPad портрет имеет 2 столбца, а ландшафт - 3 столбца.

Пожалуйста, смотрите схему ниже, объясняющую мою проблему.

CURRENT CSS

/* GLOBAL STYLE ( which iPhone uses first - 1 column ) ----------- */

.module {
    display: block;
    overflow: hidden;
    width: 100%;
    float: left;
}

/* IPADS (PORTRAIT - 2 column ) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

    .module {
        width: 50%;
    }

}

/* IPADS (LANDSCAPE - 3 Column ) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

    .module {
        width: 33.33%;
    }

}

ОСНОВНОЙ РАЗМЕР

<div>

    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>
    <div class="module"></div>

</div>

<ч />

ОБНОВЛЕНИЕ - Я СОЗДАЛ ЧИСТЫЕ CSS-ФАЙЛЫ, чтобы ИМИТИРОВАТЬ МОЮ ПРОБЛЕМУ

Скрипка ниже имитирует СМАРТФОНЫ (ПОРТРЕТ И ЛАНДШАФТ) - ОДНА КОЛОННА

См. Стиль .module - width: 100%, имитирующий появление этого @media-запроса

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)

http://jsfiddle.net/motocomdigital/kdgnP/1/

Скрипка ниже имитирует IPADS (ПОРТРЕТ) - ДВА КОЛОННЫ

См. Стиль .module - width: 50%, имитирующий появление этого @media-запроса

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

http://jsfiddle.net/motocomdigital/kdgnP/2/

Скрипка ниже имитирует IPADS (ЛАНДШАФТ) - ТРИ КОЛОННА

См. Стиль .module - width: 33.33%, имитирующий появление этого @media-запроса

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

http://jsfiddle.net/motocomdigital/kdgnP/3/

Answer 1

Как я уже сказал в комментарии, вам нужно рассчитать это в javascript и использовать абсолютное позиционирование. Вот пример:

http://jsfiddle.net/rJxtm/4/

//Generate random height for each module, normally this doesn't need to be done because
//they have various amounts of contents in a real app.
$(".module").each(function(i) {
    var height = (150 + (Math.random() * 100 | 0));
    this.style.height = height + "px";
});


$(window).bind("orientationchange resize", function(e) {
    var modules = $(".module"),
        columnWidth = modules[0].offsetWidth,
        margin = 10,
        parentWidth = $(".modules").width(),
        fits = Math.floor(parentWidth / (columnWidth + margin * 2)),
        columnHeights = {},
        i;

    for (i = 0; i < fits; ++i) {
        columnHeights[i] = 0;
    }

    function getTop(i) {
        var nColumn = i % fits;
        return columnHeights[nColumn];
    }

    modules.each(function(i) {
        var height = this.offsetHeight, //Now I am just retrieving the height
            nColumn = i % fits;

        this.style.left = ((columnWidth + margin) * nColumn) + "px";
        this.style.top = getTop(i) + "px";
        columnHeights[nColumn] += (height + margin);
    });

}).trigger("resize");

Answer 2

Вы можете использовать JavaScript, чтобы установить одинаковую высоту для всех из них.

Это минимизированный плагин jQuery:

(function(a){a.fn.equalHeight=function(){var b=0;this.each(function(){var c=a(this).height();c>b&&(b=c)});this.each(function(){a(this).height(b)})}})($);

И вы можете использовать вот так:

$('#modules').children().equalHeight();

Другим хорошим решением была бы таблица отображения CSS.Взгляните на этот пост: http://css -tricks.com / жидкостная ширина-равная-высота-столбцы /

Answer 3

Это не может быть изменено просто поплавком - единственный вариант - сделать все эти модули одинаковыми по размеру (или добавить некоторое поле для более мелких)