Question

我正在开发一个与diff工具类似的网络应用（C＃后端）项目。在一个视图中，我在左右列中有两个相同文本的版本。它们将具有所有相同的节标题，但不一定是段落中的相同文本。

我在div中有这个部分，然后在它自己的div中有每个列。一位朋友建议我可以使用某种偏移式的CSS属性，但我还没有想出办法让它变得可行。我无法添加计算出的新行数（或硬编码边距调整），因为每组数据都有不同的偏移量，以及每个屏幕尺寸。

这是一个jsfiddle，其中包含我所拥有的简化示例：http://jsfiddle.net/#&togetherjs=79sTr7vnDR

Answer 1

这是我放在一起的代码。

<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）包装在一个包装器中，您可以使用浮动和清除来使它们具有相同的高度。我使用了一些通用的样式来证明这一点，但是这个功能的核心是浮动，并在内容部分的每对（左侧和右侧）周围清理。

Answer 2

我在评论中看到，您无法横向拆分数据。你可以在每一侧添加类，将它们垂直分开吗？例如，您是否可以将<h1>及其相应的<p>元素包装在<div class="subsection1">的每一侧？（我附上一个fiddle here示例）

因为如果可以，你可以使用一些jquery来计算每一侧相同类的最低位置，并将垂直偏移设置为等于最低位置，然后继续。我很乐意帮助你做一个例子，但我只是想在我做之前确保它可行：P希望有所帮助！

排列不同列中的文本部分

2 个答案: