我正在尝试制作一条响应 div 高度的垂直线

Question

我的垂直线位于我想要的位置，但我似乎不知道如何让它与我的 p 元素和放映时间的 div 高度相同。理想情况下，当用户调整页面大小时，线条将随元素一起调整大小。我是编码新手，我确信这是一个简单的解决方案，但我已经用尽了我一直在尝试解决这个问题的资源。

.wrapper {
    max-width: 2400px;
    margin: 0 auto;
}

h3{
    font-family: fino;
    color: #BF2035;
    text-align: center;
    font-size: 6em;
    padding: 25px 25px 40px 25px;
}

.showtimes{
    width: 50%;
    
}

p{
    font-family: bookmania, serif;
    font-weight: 400;
    font-size: 3em;
    font-style: normal;
    text-align: center;
    width: 50%;
    padding: 40px;
}

.dates{
    font-family: bookmania, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    display: list-item;
    text-align: center;
    list-style: none;
    padding-left: 0%;
    padding-right: 65px;
}

.vl {
    border-left: 6px solid black;
    height: 50%;
    position: absolute;
    left: 55%;
    margin-left: -3px;
  }

 </div>  
        <section class="wrapper row">
            <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love, this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
            </p>

        <div class="showtimes"> 
            <h3>Showtimes</h3>
            <ul>
                <li class="dates">Friday, April 29th, 8:00pm</li>
                <li class="dates">Saturday, April 30th, 8:00pm</li>
                <li class="dates">Sunday, May 1st, 8:00pm</li>
            </ul>
        </div>

        <div class="vl"></div>

        </section>
    </div>

Answer 1

使用 display: flex 使两个 div 正确对齐。 flex-direction: row 将进行处理，以便两个元素并排。

.wrapper {
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}

h3{
    font-family: fino;
    color: #BF2035;
    text-align: center;
    font-size: 6em;
    padding: 25px 25px 40px 25px;
}

.showtimes{
    width: 50%;
    border-left: 6px solid black;
    
}

p{
    font-family: bookmania, serif;
    font-weight: 400;
    font-size: 3em;
    font-style: normal;
    text-align: center;
    width: 50%;
    padding: 40px;
}

.dates{
    font-family: bookmania, serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3em;
    display: list-item;
    text-align: center;
    list-style: none;
    padding-left: 0%;
    padding-right: 65px;
}

</div>  
        <section class="wrapper row">
            <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love, this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
            </p>

        <div class="showtimes"> 
            <h3>Showtimes</h3>
            <ul>
                <li class="dates">Friday, April 29th, 8:00pm</li>
                <li class="dates">Saturday, April 30th, 8:00pm</li>
                <li class="dates">Sunday, May 1st, 8:00pm</li>
            </ul>
        </div>

        <div class="vl"></div>

        </section>
    </div>

Answer 2

您可以使用 border-right 来达到相同的结果。如果您希望在 p 和类 showtime 的 ul 上分别添加垂直线，您可以在每个元素上添加以下内容：

border-right: 5px solid black;

请参阅下面的代码片段供您参考：

.wrapper {
  max-width: 2400px;
  margin: 0 auto;
}

h3 {
  font-family: fino;
  color: #BF2035;
  text-align: center;
  font-size: 6em;
  padding: 25px 25px 40px 25px;
}

.showtimes {
  width: 50%;
}

.showtimes>ul {
  border-right: 5px solid black;
}

p {
  font-family: bookmania, serif;
  font-weight: 400;
  font-size: 3em;
  font-style: normal;
  text-align: center;
  width: 50%;
  padding: 40px;
  border-right: 5px solid black;
}

.dates {
  font-family: bookmania, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  display: list-item;
  text-align: center;
  list-style: none;
  padding-left: 0%;
  padding-right: 65px;
}

.vl {
  border-left: 6px solid black;
  height: 50%;
  position: absolute;
  left: 55%;
  margin-left: -3px;
}

</div>
<section class="wrapper row">
  <p>Pages of a Love Manifesto is a devised theatre piece that, at its core, explores love: our definitions of love, how we relate to love, how we can come to know love and be better practitioners of love, etc. Guided by bell hooks narrative, All About Love,
    this show is a radical deep dive into love (and heartbreak) inspired by personal tales and testimonies.
  </p>

  <div class="showtimes">
    <h3>Showtimes</h3>
    <ul>
      <li class="dates">Friday, April 29th, 8:00pm</li>
      <li class="dates">Saturday, April 30th, 8:00pm</li>
      <li class="dates">Sunday, May 1st, 8:00pm</li>
    </ul>
  </div>

</section>
</div>