Блог

Я работаю над проектом веб-приложения (серверной части C #), который похож на инструмент diff. В одном представлении у меня есть две версии одного и того же текста в левом и правом столбцах. Все они будут иметь одинаковые заголовки разделов, но не обязательно один и тот же текст в абзацах.

У меня есть этот раздел в div, а затем каждый столбец в своем собственном div. Друг предположил, что я мог бы использовать какое-то CSS-свойство offset-from-the-top, но я не нашел способа сделать это работоспособным. Я не могу просто добавить рассчитанное количество новых строк (или жестко запрограммированные корректировки полей), потому что каждый набор данных будет иметь разные смещения, а также каждый размер экрана.

Это jsfiddle с упрощенным примером того, что у меня есть: http://jsfiddle.net/#amp;togetherjs=79sTr7vnDR

Я вижу в вашем комментарии, что вы не можете разделить данные по горизонтали. Можете ли вы добавить классы с каждой стороны, разделив их по вертикали? Например, не могли бы вы обернуть <h1> s и соответствующие <p> им элементы в a <div class="subsection1"> с каждой стороны? (Я прикрепил здесь скрипку с примером)

Потому что, если вы можете, вы могли бы использовать некоторый jquery для вычисления самых низких позиций одних и тех же классов с каждой стороны и установить вертикальное смещение равным самому низкому и продолжить. Я был бы рад помочь вам с примером, но я просто хочу убедиться, что он жизнеспособен, прежде чем я это сделаю: P Надеюсь, это поможет!

Вот код, который я собрал воедино.

 <div class="side-by-side-wrapper">
    <div class="content-block">
        <div class="side1">HEre is your header</div>
        <div class="side2">Here is your header from the other side.<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
    </div>

    <div class="content-block">
        <div class="side1">HEre is content from block 1<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
        <div class="side2">Here is content from block 2 <p>test</p><p>test</p><p>test</p>
    </div>

        <div class="content-block">
        <div class="side1">HEre is footer from block 1<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p></div>
        <div class="side2">Here is footer from block 2 <p>test</p><p>test</p><p>test</p>
    </div>
</div>
  

И CSS

 .side-by-side-wrapper
{
    border: 1px solid red;
    overflow: hidden;

}
.side-by-side-wrapper .content-block
{
    clear: both;
    border-bottom: 1px solid red;
}

.content-block .side1, .content-block .side2
{
    float: left;
    width: 50%;
}
  

Если вы обернете каждый раздел (в моем примере content-block ) в оболочку, вы можете использовать плавающий и очищающий, чтобы они имели одинаковую высоту. Я использовал несколько общих стилей, чтобы доказать свою точку зрения, но суть этой функциональности плавающая с очисткой вокруг каждой пары (слева и справа) разделов содержимого.