上下文：我有一个文本的两个版本，一个是英文版本，另一个是翻译版本。我希望将两者并排显示在两列中。然而，与每个翻译一样，有些段落比原文更小或更大，我希望它们对齐，即保持段落的第一句在原文和翻译文本中对齐：En Paragraph Translated ParagraphLarge en paragraph Shorter translationwith 3 with 2 lineslinesBoth are aligned At the top of theLike this. paragraph然而，由于 HTML 页面的构造方式，我将原始文本和翻译文本交错在交替的段落中：.container { display:flex; flex-wrap:wrap;}.container > p { flex-basis:50%; flex-grow:1;}<div class="container"> <p>Large en paragraph with 3 lines (English)</p> <p>Shorter translation with 2 lines (Translation)</p> <p>Both are aligned Like this. (English)</p> <p>At the top of the paragraph (Translation)</p></div>因此我在容器中使用了 flex box 并将段落设置为 flex-grow: 1; flex-basis: 50% 以强制两列。但是，当我尝试选择文本以从呈现的页面复制它时，光标选择两列（遵循结构）。我想要的是用户能够选择英文文本或翻译文本。我怎么能这样做呢？
2 回答
MMTTMM
TA贡献1869条经验 获得超4个赞
不要交替翻译，先把所有英语放在最后，然后再放在所有非英语。然后，您可以依靠 CSS 网格而不是 Flexbox 来创建布局：
.container {
display:grid;
width:300px;
grid-auto-columns:1fr;
grid-auto-flow:dense;
}
.container > * {
grid-column:1;
}
.container > .tr {
grid-column:2;
}
<div class="container">
<p>Large en paragraph with 3 lines (English)</p>
<p>Both are aligned Like this. (English)</p>
<p class="tr">Shorter translation with 2 lines (Translation)</p>
<p class="tr">At the top of the paragraph (Translation)</p>
</div>
潇潇雨雨
TA贡献1833条经验 获得超4个赞
首先尝试按列拆分文本，然后按每列中的段落拆分文本。垂直对齐可以通过“min-height”来完成。财产。
body {
display: flex;
}
div {
flex-grow: 1;
flex-basis: 50%
}
p {
min-height: 80px;
}
<body>
<div>
<p>Large en paragraph with 3 lines jhgvs dfhbs idufb sudhbh bdsfuyvbs odufyo iuyb (English)</p>
<p>Both are aligned Like this. (English)</p>
</div>
<div>
<p>Shorter translation with 2 lines (Translation)</p>
<p>At the top of the paragraph (Translation)</p>
</div>
</body>
- 2 回答
- 0 关注
- 91 浏览
添加回答
举报
0/150
提交
取消