Question

我正在使用JQuery使DIV与其宽度具有相同的高度并相应地更新。

我还需要制作另一个DIV（具有不同的宽高比）与方形div保持相同的高度。

即使调整浏览器窗口大小，黑色DIV也应与红色和白色div的高度相匹配。

function update() {
  $(".match").each(function() {
    var height = $(this).width();
    console.log(height);
    $(this).css('height', height + 'px');
  });
}

update();
$(window).resize(function() {
  update();
});

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 2000px;
  background-color: #333333;
}

.square {
  width: 10%;
  background-color: #ffffff;
  float: left;
}

.oblong {
  width: 40%;
  float: left;
  max-height: 150px;
  background-color: #000000;
}

.color {
  background-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="main">
    <div class="oblong match"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
  </div>

Answer 1

您已将max-height:150应用于课程＆＃39; .oblong . Remove it. it shoud work. Please see updated https://jsfiddle.net/jignesh221290/cL8s5La5/2/`

Answer 2

只需在循环外指定变量，然后你就可以为循环中的变量赋值高度，并在退出循环后用它来更新元素的高度：

tf.nn.dynamic_rnn

Answer 3

我在盒子周围添加了一个包装器并将其显示为flexbox。我从黑匣子中删除了班级match，因此不会为其重新计算高度，而是自动分配。

＆＃13;

function update() {
  $(".match").each(function() {
    var height = $(this).width();
    console.log(height);
    $(this).css('height', height + 'px');
  });
}

update();
$(window).resize(function() {
  update();
});

＆＃13;

.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 2000px;
  background-color: #333333;
}

.toprow {
  display: flex;
}

.square {
  width: 10%;
  background-color: #ffffff;
}

.oblong {
  width: 40%;
  max-height: 150px;
  background-color: #000000;
}

.color {
  background-color: red !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
  <div class="toprow">
    <div class="oblong"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
    <div class="square match"></div>
    <div class="square match color"></div>
  </div>
</div>

＆＃13;

DIV与JQuery匹配具有不同宽高比的其他div的高度

3 个答案: