Javascript 浮动div-可变高度和可变列-无间隙
我已使用小提琴进行了更新，请参见底部 我正在开发一个wordpress主题，用于iphone、iPad和其他webkit设备 我正在使用媒体查询根据设备的大小和方向更改div的宽度 但是，这些div向左浮动，以填充设备屏幕 我的问题是浮动div的高度是可变的。而高于一些的div导致了浮动元素的差距问题 我需要一个可能的修复建议，这样就永远不会有任何间隙，元素总是浮动的，即使它的路径中有一个更高的div 是否有一种可能的方法将div高度均衡到最高div，唯一的问题是它需要在iPad上改变方向。在iPhone上也没那么糟糕，因为只有一列。但在iPad上，肖像有2列，风景有3列 请参见下面的图表解释我的问题。Javascript 浮动div-可变高度和可变列-无间隙,javascript,css,dynamic,css-float,orientation,Javascript,Css,Dynamic,Css Float,Orientation,我已使用小提琴进行了更新，请参见底部 我正在开发一个wordpress主题，用于iphone、iPad和其他webkit设备 我正在使用媒体查询根据设备的大小和方向更改div的宽度 但是，这些div向左浮动，以填充设备屏幕 我的问题是浮动div的高度是可变的。而高于一些的div导致了浮动元素的差距问题 我需要一个可能的修复建议，这样就永远不会有任何间隙，元素总是浮动的，即使它的路径中有一个更高的div 是否有一种可能的方法将div高度均衡到最高div，唯一的问题是它需要在iPad上改变方向。在i
当前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>
下面的小提琴模拟iPad（纵向）两列 请参见样式
.module宽度：50%@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
下面的提琴模拟iPad（横向）-三列 请参见样式
.module宽度：33.33%@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
这不能简单地通过浮动来解决-唯一的选择是使所有这些模块的大小相同（或为较小的模块添加一些余量）您可以使用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显示表。看看这篇文章：就像我在评论中说的那样，你需要用javascript计算，并使用绝对定位。以下是一个例子：
//为每个模块生成随机高度，通常不需要这样做，因为
//在一个真正的应用程序中，它们有各种各样的内容。
$（“.module”）。每个（函数（i）{
变量高度=（150+（Math.random（）*100 | 0））；
this.style.height=高度+px；
});
$（窗口）。绑定（“方向更改大小”，函数（e）{
变量模块=$（“.module”），
columnWidth=模块[0]。偏移网络宽度，
保证金=10，
parentWidth=$（“.modules”）.width（），
拟合=数学地板（parentWidth/（columnWidth+边距*2）），
columnHeights={}，
我
对于（i=0；i“onorientationchange”“onresize”100%768parentDiv.offsetWidthabsolute