Question

我使用这个javascript，根据内容使2个div具有相同的高度。然而，当我使屏幕变小时，div 1的内容在div 2下面（尝试IE和FF）。换句话说，div 1不伸展。然而，当我改变屏幕尺寸并使其变得更小时，div确实会拉伸。当我刷新屏幕大小低于1024px的div并调整大小时，它会拉伸，直到我再次将屏幕尺寸设置在1024以上和1024以下。

这一切都有点模糊（也许），但我让这个视频清除了：https://www.youtube.com/watch?v=lxe7Lr4Jt0s 另请参阅此处：http://jsfiddle.net/evvwhosz/或此处：http://goo.gl/41IRWm

我发现javascript导致了这一点，因此我试图在屏幕调整大小低于1024px时删除javascript（边距），但它到目前为止还没有工作。正如你所看到的，我真的付出了一些努力来陈述我的问题;）这是因为我已经在寻找解决方案已经很久了。拜托，谁可以帮帮我？

代码如下：

<html>
<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
  function handleMargins() {
         var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        if(width > 1024) {
           setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 0; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();

        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 0) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
        }
         else {
            return false;
        }

    }  
    jQuery(document).ready(handleMargins);
    $(window).resize(handleMargins);
    </script>
  <style>
body{ background:#f6f6f6;}
#container2 {
width: 926px;



 width:100%;
}
#leftCol2{ float:left;
    width: 300px;
    background:#FFFFFF;

    }
#rightCol2{ float:left;
width:300px;
background: #FF9;

}
@media only screen and (max-width: 1024px) {
#leftCol2{float:left;
    width:100%;

    }
#rightCol2{float:left;
width:100%;
}

}
</style>  
</head>

<body>
<div id="container2">

                  <div id="leftCol2">
<p>This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one.</p>
<p>This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one. This div is longer than the right one.LAST</p>
    </div>
        <div id="rightCol2">
<p>Div 2.</p>


       </div>
</div>
</body>
</html>

Answer 1

请按以下方式更改您的CSS。

#leftCol2{ float:left;
    min-width: 300px;
    background:#FFFFFF;

    }
#rightCol2{ float:left;
min-width:300px;
background: #FF9;
}

更新了jsfiddle http://jsfiddle.net/evvwhosz/1/

Answer 2

通过方法的微小改动

          function handleMargins() {
                 var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                if(width > 1024) {
                   setTimeout(function(){
               var divWidth = Math.floor($('#container2').width() / 2);
               $('#leftCol2').css({width : divWidth});
               $('#rightCol2').css({width : divWidth});     
                var lcol_height = $("#leftCol2").height() + 0; // add 80 for margin + padding
                var rcol_height = $("#rightCol2").height();
                if(rcol_height > lcol_height) 
                $("#leftCol2").css('height',(rcol_height - 0) + 'px');
                else 
                    $("#rightCol2").css('height',lcol_height + 'px');
            }, 500);
                }
                 else {
                    return false;
                }

            }

Answer 3

删除浮动，是我的建议。使用display：inline-block; 现在，您在媒体查询中唯一需要做的就是默认返回显示：块; 让他们坐在彼此之下。

我认为这就是你需要的东西？如果你还想确保它们不保持相同的高度。去一个高度：自动！重要;在媒体查询中。

调整屏幕大小时删除javascript函数？

3 个答案: