Скажем, у меня есть структурированный контент в HTML - например, текст в параграфах, сгруппированных в некоторые разделы. И позвольте сказать, что у меня есть другой экземпляр той же структуры, и я хочу отображать оба содержимого как два столбца бок о бок, используя HTML и CSS. Как это сделать? Дело в том, что я хочу, чтобы соответствующие элементы (абзацы, разделы) внутри столбцов были выровнены так, чтобы они начинались с одинаковой высоты.
Примерами таких структур могут быть двуязычная страница или исходный код вместе с номерами строк или с некоторыми комментариями сторон к отдельным строкам.
Единственная идея, которую я имею, это использовать таблицу, но я не уверен, что это лучшее решение. Я хочу, чтобы иметь возможность выбирать контент, как если бы столбец был обычной веб-страницей, но выбор в таблице работает так, что сначала выбираются ячейки в строке.
Далее следует пример. Напомним, что я хочу, чтобы соответствующие элементы начинались с одинаковой высоты.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.main {
margin: auto;
width: 500px;
}
.column {
float: left;
width: 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
</div>
</body>
</html>
