Question

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

您对插件或我可以使用的html / css技术有所了解吗？

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

然而，我想知道这个策略是否会导致网站的响应能力出现问题，如果没有其他方向我需要查看。

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

非常感谢！

Answer 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即可开始。

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

1 个答案: