创建垂直和水平线以将文本段落相互链接答案

【问题标题】：Creating vertical and horizontal lines to link text paragraphs with each other创建垂直和水平线以将文本段落相互链接
【发布时间】：2014-12-12 18:28:40
【问题描述】：

对于我们的项目网站，我们希望创建一个特殊的布局，其中一行或几行将文本段落或文本框相互链接，如this draft 所示。

您对插件或 html/css 技术有什么了解吗？

到目前为止，我发现的唯一内容是关于如何创建水平和 vertical lines（hr 和 div class="verticalLine"）以及关于 css positioning 的描述。

然而，我想知道这种策略是否会导致网站的响应能力出现问题，以及我是否需要寻找其他方向。

我已经准备好学习 HTML/CSS 技能，然后在这里发布结果，只是想从有经验的人那里知道这是否是正确的方向。

非常感谢！

【问题讨论】：

请您直观地解释一下您所描述的内容吗？就像（至少对我而言），这听起来像是某种流程图？
感谢 jbutler483 提出您的问题，我在上面的问题中添加了草稿。（仍在学习如何使用这个有趣的论坛）
流程图似乎是一个符合我们想法的概念，谢谢！这可能会有所帮助，我现在就去看看：stackoverflow.com/questions/15567278/…
我很高兴能给你一个可能的解决方案。但是，我必须告诉您，这绝对是不是论坛。这是一个问答网站（非常如此）。但是，如果您想了解更多信息，我们总是有您可以参加的导览（屏幕右上角）:)

标签： css wordpress content-management-system lines

【解决方案1】：

您可以仅使用 CSS 和 pseudo elements. 来实现这一点。使其具有响应性是可行的，并且浏览器支持会相当不错，但并不完整。这是一种并非完全必要的功能，因此会很好地降级：

.box {
    /* Default styles for our text boxes */
    background:rgb(240, 240, 240);
    border: 1px solid rgb(180, 180, 180);
    padding:2em;
    width:50%;
    float:left;
    position:relative;
    /* Need this for the after elements */
}
.box:nth-child(even) {
    /* Move every other box to the right */
    float:right;
}
.box:after {
    /* Creates an after element for our lines */
    content:"";
    height:50%;
    border-top:2px solid grey;
    border-right:2px solid grey;
    width:25%;
    position:absolute;
    left:100%;
    top:50%;
}
.box:nth-child(even):after {
    /* Move the lines for the even boes to the other side */
    left:auto;
    right:100%;
    border-right:none;
    border-left:2px solid grey;
}

<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

看看这个JS Fiddle 开始吧。

【讨论】：