如何使两个不相关的外部 div 的内部 div 高度相等？

Question

我正在开发一个翻译/词典网站，其中有两列，一列包含文本，另一列包含另一种语言的翻译/含义。

这是我现在所取得的成就的一支笔 https://codepen.io/anon/pen/GMVrvR?editors=0100

HTML

        <div class="chapter" style="direction: ltr;">
            <p class="">
                col#1
            </p>
        </div>

        <div id ="left" class="lines" style="height: 532px; margin-right: -17px;" tabindex="0">
            <div class="line" >
                <span class="index-no">1</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</span>
            </div>
            <div  class="line" >
                <span class="index-no">2</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo </span>
            </div>
            <div class="line" >
                <span class=" index-no">3</span><span class="">parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </span>
            </div>
            <div class="line" >
                <span class=" index-no">4</span><span class="">. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,</span>
            </div>
            <div class="line" >
                <span class=" index-no">5</span><span class="">Sed fringilla mauris sit amet nibh.</span>
            </div>
            <div class="line" >
                <span class=" index-no">6</span><span class="">Sed fringilla mauris sit amet nibh.</span>
            </div>
            <div class="line" >
                <span class=" index-no">7</span><span class="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </span>
            </div>
            <p class="blank-line"></p>
        </div>

    </div>
</div>
<div class="block" style="width: 600px; height: 686px; ">
    <div class="block-inner">
        <div class="chapter" style="direction: ltr;">
            <p class="">
                col#2
            </p>
        </div>

        <div id ="right" class="lines" style="height: 532px; margin-right: -17px;" tabindex="0">
            <div class="line" >
                <span class="index-no">1</span><span >Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</span>
            </div>
            <div class="line">
                <span class="index-no">2</span><span class=""> A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of </span>
            </div>
            <div class="line" >
                <span class="index-no">3</span><span class="">packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her ho</span>
            </div>
            <div class="line" >
                <span class="index-no">4</span><span class="">the first hills of the Italic Mountains, she had a last view back on the skyline of her</span>
            </div>
            <div class="line" >
                <span class="index-no">5</span><span class=""> The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks </span>
            </div>
            <div class="line">
                <span class="index-no">6</span><span class="">the first hills of the Italic Mountains, she had a last view back on the skyline of her</span>
            </div>
            <div class="line">
                <span class="index-no">7</span><span class="">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of!</span>
            </div>
            <p class="blank-line"></p>
        </div>

    </div>
</div>

如您所见，每一列都包含包含文本/翻译的内部 div。

我需要做的是：

使column#1中每个inner div的高度等于column#2中对应inner div的高度，意思是：

col#1 中 div#1 的高度 = col#2 中 div#1 的高度
和
col#1 中 div#2 的高度 = col#2 中 div#2 的高度 等等

请注意：
- 从数据库动态创建的文本和翻译，所以我不知道 div 的大小。
- 有时文字高度会大于翻译高度，而有时翻译高度会更大。
- 我想将滚动条保留在 2 列中，因为我想让用户能够仅滚动一列或滚动相互同步的 2 列，所以我认为将文本和相应的翻译变成一个 div 将不行。 - 会有一个+300的内部div/page，所以如果你用java-script/jquery来解决这个问题，我希望它会很快。

那么让对应的 div 取相同高度的最佳方法是什么？

Answer 1

使用 jQuery：https://codepen.io/anon/pen/gGVGwj

// Create two arrays for the left element heights and the right element heights
var leftArray = [];
var rightArray = [];

// Get the height of each .line element and save it to the appropriate array
$('#left .line').each(function(i) {
  leftArray.push($(this).height());
});
$('#right .line').each(function(i) {
  rightArray.push($(this).height());
});

// For each element on the left, if its height is smaller than the
// corresponding element on the right, set its height via css to 
// equal the right-side element, and vice versa. Nothing to do if 
// the heights are equal.
for (var i = 0; i < leftArray.length; i++) {
  if (leftArray[i] < rightArray[i]) {
    $('#left .line').eq(i).css('height', rightArray[i])
  } else if (leftArray[i] > rightArray[i]) {
    $('#right .line').eq(i).css('height', leftArray[i])
  }
}

我认为这会相当快，至少比为每个元素设置高度要快。对于响应式或移动环境，绝对有一些工作要做，所以无论如何这都不是一个理想的场景，但希望这能满足您的需求。

Answer 2

检查下面的代码。我改用了 flex。

.container {
  display: flex;
  flex-wrap: wrap;
}

.container .cell {
  flex-basis: calc(50% - 40px);
  padding: 10px;
}

.container .header {
background: #ccc;
}

<div class="container">

 <div class="header cell">Original</div>
 
 <div class="header cell">Translation</div>

  <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
  
   <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
  
   <div class="cell">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</div>

  <div class="cell">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia,</div>
</div>

Answer 3

jQuery 解决方案：

function sameHeight(leftId,rightId){
    $('#'+ leftId + ' .line').each(function(i){
        var h = $(this).outerHeight(); // get height
        $(this).css('height', h); // set height to left
        $('#' + rightId + ' .line').eq(i).css('height', h); // set height to right
    });
}
sameHeight('left','right');

Answer 4

向左循环并获取每个元素的高度。我添加了一个 if 语句来确定哪一侧更高，然后增加较小一侧的高度。

祝你好运！

var n = 1;
jQuery('#left .line').each(function(){
  var left_height = jQuery(this).height();
  var right_height = jQuery('#right .line:nth-of-type(n)').height();
  if(left_height > right_height){
    jQuery('#right .line:nth-of-type(n)').height(left_height);
  }
  if(right_height > left_height){
    jQuery(this).height(right_height);
  }
  n++;
});

Answer 5

为高度应该对应的两个 div 元素添加一个增量相同的子类： 第 1 列：

<div class="line ev1" ></div>
<div class="line ev2" ></div>
...

第 2 列：

<div class="line ev1" ></div>
<div class="line ev2" ></div>
...

为每个行元素制作一个 jQuery 的 cicling trought 并在子类上制作一个 subcicle 以获得最高，而不是为当前子类分配最高高度

var maxHeight = 0;
var c=0;

$(".line").each(function () {
 c++;

$(".ev"+c).each(function () { 
    if ($(this).height() > maxHeight) {
        maxHeight = $(this).height();
    }
 })
    $(".ev"+c).height(maxHeight);
});

检查我的 jsfiddle： http://jsfiddle.net/wvfqgkk1/4/

Answer 6

在css中添加样式

* {
  box-sizing: border-box;
}

并在 JS 中计算两边的每条线高，并在相对较小的边线上设置最大高度。

var leftLines = leftDiv.querySelectorAll('.line');
var rightLines = rightDiv.querySelectorAll('.line');
if(leftLines.length && leftLines.length == rightLines.length) {
  for(var i=0; i<leftLines.length; i++) {
    if(leftLines[i].offsetHeight >= rightLines[i].offsetHeight) {
      rightLines[i].style.height = leftLines[i].offsetHeight + 'px';
    } else {
      leftLines[i].style.height = rightLines[i].offsetHeight + 'px';
    }
  }
}

希望这会有所帮助。

Answer 7

一个简单的解决方案是在较短的字符串中添加空格，使其长度与较大的字符串相等。

String a="hello";             // smaller string 
String b="hello,hello...."   // larger string

public static String appendSpaces(String s1,String s2){

     if(s1.length() < s2.length()){
         int d=s2.length() - s1.length();
         s1=String.format("%1$"+d+ "s", s1);
     }
    else{
         int d=s1.length() - s2.length();
         s2=String.format("%1$"+d+ "s", s2);
    }
}

click here 了解String.format的详细信息。