上下文：我有一個文本的兩個版本，一個是英文版本，另一個是翻譯版本。我希望將兩者并排顯示在兩列中。然而，與每個翻譯一樣，有些段落比原文更小或更大，我希望它們對齊，即保持段落的第一句在原文和翻譯文本中對齊：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 關注
- 155 瀏覽
添加回答
舉報
0/150
提交
取消