如何使兩個無關的外部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，其中包含文本/翻譯。

我需要做的是：

使第1列中每個內部div的高度等於第2列中相應的內部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

檢查下面的代碼。 我改用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 2

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 3

向左循環並獲取每個元素的高度。 我添加了一條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 4

使用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 5

向兩個其高度應對應的div元素添加一個遞增的相同子類：column1：

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

第2欄：

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

為每個線元素和子類創建一個子彈式jQuery，以獲取最高，而不是為當前子類分配最高的高度

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);
    }
}

單擊此處以了解String.format的詳細信息。