html - 自举分隔符问题

Question

我想做这张照片中的事情 https://s1.postimg.org/1u8qkhey4v/Untitled-1.png

我试过做类似的事情，但我更好奇如何在它们之间做那条水平线

这是我的代码:

 <div class="container">
      <div class="row">
        <div class="col-md-6">
            <div class="col-md-4">

                <a href="#"><img class="item1"  src="img/item1.png" alt="item1"></a>
                <a href="#"><img class="item1"  src="img/item1.png" alt="item1"></a>              
             </div>
            <div class="col-md-8">
                <h2 class="title">LOREM IPSUM DOLOR</h2>
                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus felis. Sed nec dignissim felis, id tempor turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


                <h2 class="title">LOREM IPSUM DOLOR</h2>
                <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus felis. Sed nec dignissim felis, id tempor turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

            </div>

        </div>
        <div class="col-md-6">
          <div class="col-md-4">
              <a href="#"><img class="item1"  src="img/item1.png" alt="item1"></a>
              <a href="#"><img class="item1"  src="img/item1.png" alt="item1"></a>             
          </div>
          <div class="col-md-8">
              <h2 class="title">LOREM IPSUM DOLOR</h2>
              <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus felis. Sed nec dignissim felis, id tempor turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


              <h2 class="title">LOREM IPSUM DOLOR</h2>
              <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec lectus felis. Sed nec dignissim felis, id tempor turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>


          </div>
        </div>
      </div>
    </div>
  </div>

谢谢。

Answer 1

您可以在 div 的底部添加边框。

.border-bottom {
   border-bottom: 1px solid #000;
}

然后在第一个col-md-6

添加类边框

<div class="col-md-6 border-bottom">
....
</div>