我正在翻译/词典网站上工作，我有两列，一列包含文本，另一列包含另一种语言的翻译/含义。
这是我现在所取得成就的笔 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具有相同高度的最佳方法是什么？
答案 0 :(得分：0)
检查以下代码。我改用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>
答案 1 :(得分：0)
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');
答案 2 :(得分：0)
循环向左并获取每个元素的高度。我添加了一个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++;
});
答案 3 :(得分：0)
使用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])
}
}
我认为这相当快，至少比在每个元素上设置高度要快。对于响应式或移动环境来说，还有一些工作要做，所以这绝不是一个理想的场景，但希望这可以满足您的需求。
答案 4 :(得分：0)
为两个高度应对应的div元素添加一个增量相同的子类： 列1：
<div class="line ev1" ></div>
<div class="line ev2" ></div>
...
列2：
<div class="line ev1" ></div>
<div class="line ev2" ></div>
...
为每个线元素和子类上的子类创建一个cQuery，以获得最高，而不是为当前子类指定最高的高度
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/
答案 5 :(得分：0)
在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';
}
}
}
希望这会有所帮助。
答案 6 :(得分：-1)
一个简单的解决方案是在较短的字符串中添加空格，使其长度与较大字符串的长度相等。
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。
的详细信息