Question

我想在我的网页上添加一些垂直线（我在图片1中显示）在顶部的白色框中，我已设法添加灰色线条但我希望它们的位置就像它们在图片2，

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

  p.text3 {
           position:fixed;
          bottom:23rem; 
          text-align:center; 
         width:160px;
           font-size:16px;
            font-family: 'Raleway', sans-serif;
               right:42rem;
       }

Answer 1

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

<强> 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>

<强> CSS

.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; }

希望你得到答案

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

1 个答案: