如何创建两列内容,我只能复制一面?

时间:2016-09-21 17:49:19

标签: javascript html css css3 layout

我有一个并排内容的网页,让我们说出这样的文字:http://www.yonanewman.org/kizzur/kizzur167.html

我希望能够选择' n'只复制正确的段落或左段落。也就是说,如果我需要复制一些希伯来语文本,我想突出我需要的内容,并且只是ctrl + c。

同时,段落的高度必须相等。

所以,让我们说,如果我有一个小的希伯来语句子翻译成更长的英文文本,那么下一段必须是并排的,而不是转移。

更新我发现这个答案对第二个问题非常有帮助,但它仍然不允许我只复制选定的列:How do I match the height of both column in a two column layout?

2 个答案:

答案 0 :(得分:0)

这可能看起来有点傻,而且坦率地说我可能在这里越位(我只是一只小狗),但是如果需要只突出一侧或另一侧的特定部分,你能不能在溢出内容框中有一边?即

.content-left {overflow:scroll}

我认为这可能是一个开始?

祝你好运!

答案 1 :(得分:0)

您肯定需要两个单独的div,以便页面知道文本的两个部分是分开的。如果您创建了两列,突出显示将允许您突出显示同一div中的所有内容。

要对齐段落,您需要使用一些JS来改变段落的位置。此代码段通过提供应与匹配类对齐的段落来实现,例如' par-1'等等。



$(document).on('ready',resizeText);
$(window).on('resize',resizeText);

function resizeText(){
    var prevBottom = 20;
    var numParagraphs = 3;
    for(var index = 1; index<=numParagraphs; index++){
        var start = prevBottom;
        var pars = $('.par-'+index);
        pars.each(function(){
            $(this).css({top:start});
            prevBottom = Math.max(prevBottom,$(this).position().top+$(this).outerHeight(true));
        });
    }
}
&#13;
.row{
	display: flex;
}
.col{
	width:50%;
}
.par{
	position: absolute;
	width:45%;
	margin-bottom: 0;
}
&#13;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Site</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div>
			<div class="row">
				<div class="col"><p class="par-1 par">111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 </p><p class="par-2 par">english text that goes</p><p class="par-3 par">third english line</p></div>
				<div class="col"><p class="par-1 par">hebrew text</p><p class="par-2 par">hebrew line 2</p><p class="par-3 par">third hebrew line</p></div>
			</div>
		</div>
	</body>
</html>
&#13;
&#13;
&#13;