2つの無関係な外側のdivの内側のdivを同じ高さにするにはどうすればよいですか？

Question

私は2つの列を持つ翻訳/辞書のウェブサイトに取り組んでいます.1つはテキストを含み、もう1つは翻訳/別の言語の意味を含んでいます。ここで

あなたはすべての列がテキスト/翻訳が含まれている内側のdiv要素が含まれて見ることができるように私が今 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＃でCOL＃1 =のdiv＃2の高さのCOL＃1 = COL＃でのdiv＃1の高さは2
と
のdiv＃2の 高さ1 2 など

注意してください。
- テキストaデータベースから動的に作成された変換で、divのサイズを知ることができません。
- テキストの高さが翻訳の高さよりも大きく、翻訳の高さが大きい場合もあります。
- 2つの列にスクロールバーを残したいのは、ユーザーに1つの列のみをスクロールさせたり、2つの列を互いに同期させたりする機能を与えたいからです。 divは動作しません。 - 内部のdiv /ページが+300になるので、これを解決するためにjava-script/jqueryを使用する場合、速くなることを願っています。

したがって、対応するdivを同じ高さにするにはどうすればよいですか？

Answer 1

：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

以下のコードを確認してください。代わりにフレックスを使用しました。

.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

簡単な解決策は、より大きな文字列と長さが等しくするために、より短い文字列に空白を追加することができます。

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の詳細については、

Answer 4

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 5

ループし、各要素の高さを取得します。 if文を追加して、どちら側が高いかを把握し、小さい方の高さを上げます。

最高の運があります！jQueryを使って

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 6

高さが対応していなければならないdiv要素の両方に増分同じサブクラスを追加： COLUMN1：

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

COLUMN2：

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

は、各ライン要素とsubcicleためciclingのtroughtの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をチェック：CSSで http://jsfiddle.net/wvfqgkk1/4/

Answer 7

は、スタイル

* { 
    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'; 
    } 
    } 
} 

希望すると、これが役立ちます。