垂直线与周围的文字

Question

我需要做这样的事情：

左侧和右侧带有文字的垂直线。

我看了How to make a vertical line in HTML

我虽然要制作一条垂直线，然后使用border-left和border-right

但是我不知道如何在普通中做到这一点。

Answer 1

我做了一个非常基本的示例，您可能需要修改所需大小的#content规则：

<强> HTML

<div id="content">
    <div id="text">
        <div class="txt">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.</div>
        <div class="txt-r">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.</div>
        <div class="txt">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.         </div>
    </div>
    <div id="vline"></div>
</div>

<强> CSS

body{
  margin: 0;
}
.txt{
  margin-left: 5%;
}
.txt-r{
  margin-left: 55%;
}
.txt-r, .txt {
   width: 40%;
   margin-top: 1%;
   border-style: solid;
}
#text{
  position: absolute;
}
#vline{
  position: absolute;
  border-left: thick solid #000000;
  margin-left: 50%;
  height: 100%;
}
#content{
  position: absolute;
  width: 100%;
  height: 100%;
}

<强> JSFIDDLE