Я почти полный нуб, о HTML. Если вы думаете, что ответ уже был дан где-то, пожалуйста, скажите мне! Но сначала позвольте мне объяснить:
У меня есть блог musi c, на котором я перевожу китайский Musi c. Левая сторона - это колонка с оригинальным текстом, а правая - колонка с ее переводом.
Моя проблема: я выравниваю строки, просто нажимая клавишу ввода между стихами. Он отлично работает для веб-версии, но в мобильной версии все запутано.
Поэтому я подумал, что очевидно: возможно, для решения этой проблемы может существовать код. Я на самом деле знаю пару сайтов, которые делают это просто отлично. (Например, бразильский веб-сайт под названием «Летрас Терра». Кстати, я бразилец)
Я пытался проверить их HTML, но никак не мог найти решение.
Если вы хотите посмотреть на мой блог самостоятельно, просто Google это: Baxi YinYue. И тогда вы найдете это.
Вот фрагмент кода для одного из переводов:
<div style="float: left; margin-bottom: 10px; padding: 1px; width: 43%;">
<div style="text-align: right;">
今天发现你<br />
交了新男朋友<br />
仔细看一看<br />
长得还很像我<br />
<br />
你怎么可以<br />
交了新男朋友<br />
虽然当初是<br />
我先跟你说分手<br />
<br />
搭拉搭拉<br />
搭拉搭拉<br />
搭拉搭拉搭<br />
搭拉搭拉<br />
<br />
当流下的眼泪<br />
滴在他身体<br />
就已经不再爱我<br />
<br />
为什么我还没有<br />
新女朋友<br />
而你却已经交了<br />
新男朋友<br />
<br />
交往前有没有想到<br />
我会很难过<br />
躺在床上看你照片<br />
眼泪没停过<br />
<br />
搭拉搭拉<br />
搭拉搭拉<br />
搭拉搭拉搭<br />
搭拉搭拉<br />
<br />
当流下的眼泪<br />
滴在他身体<br />
就已经不再爱我<br />
<br />
难道你不再爱我<br />
你真的不再爱我<br />
你已经不在<br />
<br />
我没有用 我没有用<br />
没办法给你要的生活<br />
当流下的眼泪<br />
滴在他身体<br />
就已经不再爱我<br />
<br />
你没有错 你没有错<br />
选择了自己要的生活<br />
当流下的眼泪<br />
滴在他身体<br />
就已经不再爱我<br />
<br />
只希望他可以<br />
好好疼妳<br />
陪你走过那些<br />
我无法给你<br />
<br />
难过的时候<br />
他会抱抱妳<br />
还要买妳<br />
愛吃的蛋饼</div>
</div>
<div style="float: right; margin-bottom: 10px; padding: 1px; width: 55%;">
<div style="text-align: left;">
Hoje descobri que você<br />
Arrumou um namorado novo<br />
Olhando minunciosamente<br />
Ele parece bastante comigo<br />
<br />
Como você pode<br />
Arranjar outro namorado?<br />
Sendo que fui eu<br />
Que terminei com você primeiro?<br />
<br />
Da-la-da-la<br />
Da-la-da-la<br />
Da-la-da-la-da<br />
Da-la-da-la<br />
<br />
Quando as lágrimas<br />
Cairem no corpo dele<br />
Por não me amar mais<br />
<br />
Por que eu ainda não tenho<br />
Uma nova namorada?<br />
E mesmo assim você já<br />
Arranjou um namorado novo<br />
<br />
Antes de arranjar não pensou<br />
Que eu ficaria muito triste?<br />
Deitado na cama vendo sua foto<br />
As lágrimas não param de cair<br />
<br />
Da-la-da-la<br />
Da-la-da-la<br />
Da-la-da-la-da<br />
Da-la-da-la<br />
<br />
Quando as lágrimas<br />
Cairem no corpo dele<br />
Por não me amar mais<br />
<br />
Será que você não me ama mais?<br />
Você realmente não me ama mais<br />
Você não está mais<br />
<br />
Eu sou inútil, eu sou inútil<br />
Incapaz de lhe dar a vida que você quer<br />
Quando as lágrimas<br />
Cairem no corpo dele<br />
Por não me amar mais<br />
<br />
Você não errou, você não errou<br />
Em escolher a vida que quer para si<br />
Quando as lágrimas<br />
Cairem no corpo dele<br />
Por não me amar mais<br />
<br />
Só espero que ele<br />
Lhe machuque muito<br />
Que ele te acompanhe naquilo<br />
Que eu não pude lhe dar<br />
<br />
Que quando estiver triste<br />
Ele abrace você<br />
Ou melhor, que lhe compre<br />
O omelete que você ama</div>
</div>
<div style="clear: both;">
Как видите, даже здесь строки смещены, но в веб-версии блога они в порядке. Я просто хочу быть на 100% выровненным с кодом, чтобы он никогда не испортился ни на одном устройстве. Спасибо!
---- ОБНОВЛЕНИЕ Решение Ханса Феликса работает для мобильных устройств, как я и хотел, но значительно усложняет процесс пост-создания. Здесь я добавил изображение, чтобы вы, ребята, поняли, о чем я. Первая картинка - мой оригинальный код в редакторе, вторая - код Феликса.
Решения и их проблемы здесь объяснены здесь на этой картинке:
