Question

我正在使用jquery来调整我的盒子的高度，以便它们都是一样的。它工作正常，除非你开始调整浏览器的大小，p标签溢出，而我的jquery中的某些内容不允许它扩展。

CSS

.boxes { 
width: 95%;
margin:0 auto; 
} 

.box { 
display:block; 
width:25%;
color:#fff; 
float: left;
padding: 10px;
box-sizing: border-box;
} 

.one { 
background:#2E4866;  
} 

.two {  
background:#aaa; 
color:#fff; 
} 

.three { 
background:#ddd; 
color: #333; 
} 

.four { 
 background:#dc002e; 
 }


/* 768px */ 
@media only screen and (max-width:48em) { 
.boxes {  
  display:table; 
  width:100%;
 } 
.box { 
  width:90%;
  margin: 0 auto;
  float: none;
  } 
 }

Jquery的

 function equalHeight(group) {
    tallest = 0;
     group.each(function() {
      thisHeight = $(this).height();
       if(thisHeight > tallest) {
        tallest = thisHeight;
       }
    });
    group.height(tallest);
  }

 $(document).ready(function() {
   equalHeight($(".box"));
 });

要查看实时示例，请转到：http://codepen.io/bskousen/full/HbodA并调整窗口大小，您将在断点之前看到p标记溢出背景。

Answer 1

也可以在window.resize上调用你的函数。

$(window).resize(function() {
   $('.box').css('height','auto');
   equalHeight($(".box"));
});

Demo Fiddle

在窗口大小调整时自动扩展div

1 个答案: