html - 周围有文字的垂直线

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