Question

我有div，我想在其中两个具有某些内容的divs之间放置一条垂直线。我该怎么办？

这是我的代码。

#vertical-line {
  float: left;
  height: 100px;
  width: 1px;
  background-color: black;
}

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">

  <div class="col">
    <div class="row justify-content-center">
      <h4>Most popular ads</h4>
    </div>
    <div class="row" style="margin-left:85px;">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>

  <div id="vertical-line">Here goes vertical line</div>

  <div class="col">
    <div class="row justify-content-center">
      <h4>Latest ads</h4>
    </div>
    <div class="row" style="margin-left:85px;">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</div>

<hr>

Answer 1

您可以使用border-right代替div：这是更新的小提琴：

.card-body {
  display: flex;
}

.col {
  padding: 10px;
}

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

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">
  <div class="col border-line">
    <div class="row justify-content-center">
      <h4>Most popular ads</h4>
    </div>
    <div class="row">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>



  <div class="col">
    <div class="row justify-content-center">
      <h4>Latest ads</h4>
    </div>
    <div class="row">
      <div class="col">Column</div>
      <div class="col">Column</div>
      <div class="w-100"></div>
      <div class="col">Column</div>
      <div class="col">Column</div>
    </div>
  </div>
</div>

<hr>

Answer 2

添加border-right的第一个col类

<div class="card-body row" style="padding:0px;margin-top:10px;margin-left:120px;margin-right:120px">
    <div class="col border-right">

https://jsfiddle.net/lalji1051/1hucdxeg/1/

如何在两个div之间放置垂直线？

2 个答案: