Question

我一直在墙上撞了一会儿。我有这两个列需要跟随彼此的高度，因此它们都需要相对定位，因为每列中的内容都会发生变化，有时左边的那个是最高的，有时它是相反的。请参阅下面的JSFiddle：

<div class="wrapper">
  <div class="left">
    fsdfdsf
  </div>
  <div class="right">
    fsdfdsf
  </div>
  <div style="clear:both"></div>
</div>

如何在不超过.wrapper的情况下使.right与.left一样高？

Answer 1

使用flexbox，但不要忘记供应商前缀。

＆＃13;

.wrapper {
  position: relative;
  width:100%;
  height: 300px;
  background: yellow;
  display: flex;
  justify-content: space-between;
}

.left {
  flex: 0 0 65%;
  background: red;
  margin-left: 5%;
}

.right {
  flex: 0 0 25%;
  background: blue;
  margin-right: 5%;
}

＆＃13;

<div class="wrapper">
  <div class="left">
    fsdfdsf
  </div>
  <div class="right">
    fsdfdsf
  </div>
  <div style="clear:both"></div>
</div>

＆＃13;

Answer 2

您可以使用jquery执行此操作：

<div class="wrapper">
 <div class="left">
    fsdfdsf
 </div>
 <div class="right">
   fsdfdsf
 </div>
 <div style="clear:both"></div>

Jquery的：

$(document).ready(function(){
 var height = 0;
 if($(".left").height() > $(".right").height())  {
  height =  $(".left").height(); 
  $(".right").height(height);
 }else{
  height =  $(".right").height(); 
  $(".left").height(height);
 }   
});

DEMO：http://codepen.io/anon/pen/JXMpve

使2个相对div等于高度？

2 个答案: