2 div由边界分隔

Question

我正在尝试创建两个居中的div，它们被这样的边框分开。

不知道如何在两个div之间插入边框。 这两个div是可点击的。

.homescreen-content {
    display: flex; 
    flex-direction: column; 
    max-height: 100% !important; 
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
}

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <hr class="border">
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

Answer 1

如Fabio所述，您可以将<hr>标记替换为<div>，并将<div>的高度设置为所需边框的粗细。

.homescreen-content {
    display: flex; 
    flex-direction: column; 
    max-height: 100% !important; 
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
}

.border {
    width:100%;
    height:10px;
    background:blue;
}

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <div class="border"></div>
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

Answer 2

您可以使用CSS添加边框，仔细查看我的CSS！

.homescreen-content {
    display: flex; 
    flex-direction: column; 
    max-height: 100% !important; 
  }
.goto {
    margin-top:20%;
    left:0;
    height: 100% ;
    width: 100% !important;
    background-color: green;
    text-align: center;
    
    border-bottom : 15px solid white ;
}

.no {
    left:0;
    height: 100%;
   width: 100% !important;
    background-color: red;
    text-align: center;
    
    border-top : 15px solid white ;
}

<div class="homescreen-content" scroll="false">
  <div (click)="open()" class="goto">
      <h2>TITLE 1 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
  <div (click)="open()" class="no">
      <h2>TITLE 2 CENTRED</h2>
      <p>SOME CENTRED TEXT</p>
  </div>
</div>

您可以更改边框颜色

Border : 15px solid red ;

您还可以更改边框类型

Border : 15px dotted blue ;