浮动 div - 可变高度和可变列 - 无间隙

Question

我已经使用 FIDDLES 进行了更新，请参见底部

我正在开发一个 wordpress 主题，可以在 iphone 和 ipad 以及其他 webkit 设备上使用。

我正在使用媒体查询根据设备的大小和方向更改 div 的宽度。

然而，这些 div 向左浮动，以填充设备屏幕。

我的问题是浮动 div 的高度是可变的。而且 div 的高度高于某些，会导致浮动元素出现间隙问题。

我需要有关修复的可能建议，这样就不会出现任何间隙，并且元素总是浮动，即使其路径中有更高的 div 也是如此。

有没有可能的方法使 div 高度与最高 div 相等，唯一的问题是它需要适应 iPad 上的方向变化。在 iPhone 上，情况还不错，因为只有一列。但在 iPad 上，纵向有 2 列，横向有 3 列。

请参阅下图解释我的问题。

< br>

当前 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 FIDDLES 来模拟我的问题

下面的小提琴模拟智能手机（纵向和横向） - 一栏

查看样式.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/

< br>

下面的小提琴模拟 IPADS (LANDSCAPE) - 三栏

查看样式 .module - 宽度： 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

这不能简单地通过浮动来解决 - 唯一的选择是使所有这些模块大小相同（或为较小的模块添加一些边距）

Answer 3

您可以使用 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/fluid -宽度等于高度列/