如何更改弹性项目的文本选择顺序？
上下文：我有一个文本的两个版本，一个是英文版本，另一个是翻译版本。我希望将两者并排显示在两列中。然而，与每个翻译一样，有些段落比原文更小或更大，我希望它们对齐，即保持段落的第一句在原文和翻译文本中对齐：
En Paragraph Translated Paragraph
Large en paragraph Shorter translation
with 3 with 2 lines
lines
Both are aligned At the top of the
Like 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% 以强制两列。
但是，当我尝试选择文本以从呈现的页面复制它时，光标选择两列（遵循结构）。我想要的是用户能够选择英文文本或翻译文本。
我怎么能这样做呢？
开心每一天11112回答
-
MMTTMM
不要交替翻译，先把所有英语放在最后，然后再放在所有非英语。然后，您可以依靠 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> -
潇潇雨雨
首先尝试按列拆分文本，然后按每列中的段落拆分文本。垂直对齐可以通过“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>
随时随地看视频慕课网APP
相关分类
Html5