Question

我已经更新了FIDDLES，看到底部

我正在开发一个wordpress主题，适用于iphone和ipads以及其他webkit设备。

我正在使用媒体查询来更改div的宽度，具体取决于设备的大小和方向。

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

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

我需要有关修复的建议，因此永远不会有任何间隙，并且元素总是浮动，即使路径中有更高的div。

是否有可能将div高度均衡到最高div，唯一的问题是它需要在iPad上进行方向更改。在iPhone上它并没有那么糟糕，因为只有一列。但在iPad上，肖像有2列，横向有3列。

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

Diagram

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%;
    }

}

BASIC MARKUP

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

下面的小提琴模拟智慧人物（肖像和风景） - ONE COLUMN

请参阅样式.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（LANDSCAPE） - THREE COLUMN

请参阅样式.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

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

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-width-equal-height-columns/

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

3 个答案: