如何在HTML页面中添加灰色垂直线

我想在我的网页上添加一些垂直线，我已经在顶部的白色框中显示了这些垂直线（图1），我已经设法添加了三列灰线，但是我希望它们的位置与图2中的位置相同

我还想在底部文本框中添加灰色垂直线，我尝试对底部有5列的白色框使用相同的方法，希望它看起来像图2 我已经附加了一个JS小提琴与我目前的代码在它，任何帮助将不胜感激

---

复制以下代码，并按您想要的方式进行编辑。 用图像和按钮替换虚拟文本。请记住调整按钮和图像的大小，因为列宽随内容而变化

HTML

<div class="container vertical-divider">
  <div class="column one-third">
    <h3>Mobiles & Smart Phones</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare. Duis turpis lectus, laoreet ut gravida sit amet, imperdiet et nunc. Curabitur volutpat ultrices erat, et tempus dolor sodales at. In porttitor nisi et magna facilisis pulvinar. Sed aliquam nisl in nisl mattis, eu consectetur sem condimentum.</p>
  </div>
  <div class="column one-third">
    <h3>i pads & tablets</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare.</p>
  </div>
  <div class="column one-third">
    <h3>Laptops & Mac Books</h3>
    <p>Lorem ipsum dolor sit ame consectetur adipiscing elit. Donec sit amet vestibulum libero.</p>
  </div>
</div>
<div class="container vertical-divider">
  <div class="column" align="center">
    <h3>Laptops and Mac Books</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare. Duis turpis lectus, laoreet ut gravida sit amet, imperdiet et nunc. Curabitur volutpat ultrices erat, et tempus dolor sodales at. In porttitor nisi et magna facilisis pulvinar. Sed aliquam nisl in nisl mattis, eu consectetur sem condimentum.</p>
  </div>
 </div>
<div class="container vertical-divider">
<div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
 </div>

---

希望您得到您的答案

可能与HI Temani的答案重复谢谢您的回复，这允许您垂直定位线条吗？是的，您只需调整伪元素的位置，我建议您检查所有答案，而不仅仅是已接受的答案，以获得更多的方法{宽度：350px；高度：100px；背景：浅灰色；位置：相对；边距：20px；}div:在{内容：''之后；宽度：2px；高度：120px；背景：灰色；位置：绝对；底部：-6px；}有没有办法把它放在右边，就像放在左边一样？只需添加

right:0

：）嗨，比娜拉，谢谢你的回复！我只是想把它添加到我的代码中，但没有用。你介意编辑我上传的js提琴吗？好的，我会试试看！我正在尝试让垂直线看起来像第二张图片！：）检查这个提琴le out.除了将@BinaraMedawatta的代码添加到提琴之外，没有做任何事情。对提琴做了一些修改。检查这个。这更具响应性和准确性。

<div class="container vertical-divider">
  <div class="column one-third">
    <h3>Mobiles & Smart Phones</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare. Duis turpis lectus, laoreet ut gravida sit amet, imperdiet et nunc. Curabitur volutpat ultrices erat, et tempus dolor sodales at. In porttitor nisi et magna facilisis pulvinar. Sed aliquam nisl in nisl mattis, eu consectetur sem condimentum.</p>
  </div>
  <div class="column one-third">
    <h3>i pads & tablets</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare.</p>
  </div>
  <div class="column one-third">
    <h3>Laptops & Mac Books</h3>
    <p>Lorem ipsum dolor sit ame consectetur adipiscing elit. Donec sit amet vestibulum libero.</p>
  </div>
</div>
<div class="container vertical-divider">
  <div class="column" align="center">
    <h3>Laptops and Mac Books</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet vestibulum libero. Proin semper sapien et odio mattis ornare vel ac metus. Fusce venenatis risus a justo vestibulum, eu efficitur ipsum ornare. Duis turpis lectus, laoreet ut gravida sit amet, imperdiet et nunc. Curabitur volutpat ultrices erat, et tempus dolor sodales at. In porttitor nisi et magna facilisis pulvinar. Sed aliquam nisl in nisl mattis, eu consectetur sem condimentum.</p>
  </div>
 </div>
<div class="container vertical-divider">
<div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
  <div class="column one-fifths">
    <h3>Little Text</h3>
    <p>Lorem ipsum dolor sit<br> consectetur adipiscing<br> Donec sit amet vestib</p>
</div>
 </div>

.vertical-divider{
    clear: both;
    position: relative;
}

.vertical-divider:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    visibility: hidden;
}

.vertical-divider .column:not(:first-child):after, .vertical-divider .columns:not(:first-child):after{
    background: #DDDDDD;
    bottom: 0;
    content: " ";
    margin-left: -10px;
    position: absolute;
    top: 0;
    width: 1px;
}

/* Very simple grid for example */
.container { position: relative; width: 960px; margin: 20px auto; padding: 0; }

.container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }

.container .one-third.column { width: 300px; }

.container .two-thirds.column { width: 620px; }