我们如何调整垂直线的大小以匹配帧大小

Question

如何使用css调整垂直线的大小？ 我需要我的垂直线来匹配框架的大小。垂直线必须位于中心，并且必须将框架分成两个相等的尺寸。或者有没有其他方法输出垂直线？ 下面是我的html和css代码：

＆＃13;

＆＃13;

body {
  background-color: rgb(40, 40, 40);
}

.card {
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
  background-color: rgb(40, 40, 40);
}

#myPug {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  margin-top: 20px;
}

.fact {
  font-size: 30px;
}

.factList {
  font-family: cursive;
  font-size: 25px;
}

ul {
  list-style-type: none;
}

.listContent {
  text-align: left;
}

.info {
  font-family: inherit;
  font-size: 30px;
  color: rgb(0, 0, 0);
}

.infoBox {
  border-style: solid;
  border-color: rgb(55, 150, 210);
  border-radius: 10%;
  margin-left: 30%;
  margin-right: 30%;
  margin-top: 30px;
  padding-top: 20px;
}

.topic {
  text-align: left;
}

.topicDescription {
  text-align: right;
}

.prop {
  margin-left: 20px;
}

.vl {
  align-self: center;
  border-left: solid;
  padding-top: 0;
  padding-bottom: 0;
  color: black;
  height: 200px;
}

.length {
  width: 1;
  size: 500;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="card">
  <img id="myPug" src="images/burfi.jpg" alt="A cute pug's pic">
  <div class="infoBox">
    <div class="row">
      <div class="col-md-5">
        <p class="info prop">Name:</p>
        <p class="info prop">Age: </p>
        <p class="info prop">Breed: </p>
      </div>
      <div class="col-md-2">
        <div class="vl">&nbsp;&nbsp;</div>
      </div>
      <div class="col-md-5">
        <p class="info def"><em> BURFI</em></p>
        <p class="info def"><em> 2 Yrs</em></p>
        <p class="info def"><em> Pug</em></p>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是我的网页的快照：

Answer 1

.infoBox有padding-top: 20px导致空间。如果您想要一些填充，请使用内部列。

没有Bootstrap的flexbox解决方案

＆＃13;

＆＃13;

.box {
  display: inline-block;
  border: 1px solid;
  padding: 0 50px;
}

.box img {
  display: block;
  max-width: 100%;
  height: auto;
}

.box ul {
  list-style: none;
  padding: 0;
}

.box .vl {
  width: 3px;
  height: 100%;
  background: black;
}

.box .info {
  display: flex;
  justify-content: center;
  border: 3px solid;
  border-radius: 10px;
  margin-top: 30px;
}

.box .info>div:nth-child(1),
.box .info>div:nth-child(3) {
  padding: 0 30px;
}

＆＃13;

<div class="box">
  <img src="http://placehold.it/300x300" alt="">
  <div class="info">
    <div>
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
      </ul>
    </div>
    <div>
      <div class="vl"></div>
    </div>
    <div>
      <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;