将分隔线添加到CSS列

Question

我正在尝试用2列与分隔线创建一行，如下所示：

有一个浅色分隔线，还有一个白色分隔线，应该根据这样的文本数量增加：

如何在CSS中实现这一目标，以便根据任一列中的文本量增加白线分隔线？

Answer 1

您可以为长效边框创建一个容器，并在文本元素上应用一个短裤

.flexbox {
  display: flex;
}

.text-container {
  padding: 1rem 0; /*Create a top-bottom padding for text container*/
  width: 50%;
}

.text-container span {
  padding: 0 1rem; /*Create a left-right padding for text*/
  display: block;
}

.text-container:first-of-type {
  border-right: 1px solid #ccc; /*Border on text container*/
}

.text-container:first-of-type span {
  border-right: 4px solid #ddd; /*Border on text*/
  margin-right: -2.5px;
}

<div class="flexbox">
  <div class="text-container">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
  </div>
  <div class="text-container">
    <span>Lorem ipsum dolor sit amet</span>
  </div>
</div>

Answer 2

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body {
  background: #111;
  display: flex;
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
}

.container {
  width: 700px;
  box-shadow: 0px 0px 10px #000;
  background: #222;
  color: rgb(140, 140, 140);
}

.text {
  margin: 0;
  padding: 40px;
  width: 50%;
  display: flex;
  align-items: center;
}

.textcontainer {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.divider {
  display: inline-block;
  width: 1px;
  background: #fff;
  align-self: stretch;
  margin-top: 40px;
  margin-bottom: 40px;
  z-index: 1;
}

.text:nth-of-type(even) {
  border-left: 0.5px solid #444;
}

<div class="container">
  <div class="textcontainer">
    <p class="text">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
    </p>
    <span class="divider"></span>
    <p class="text">
      Hello World. this is a test. And it looks awesome to design.
    </p>
  </div>
</div>

Answer 3

其他各自的答案不能解决列a或b可以具有变量内容的问题。并明确将保证金应用于任何一列都不会解决问题白色分隔线，该划分应根据此类文本数量增加 白线分隔线的增加，根据任一列中的文本量增加/代码>。

解决方案

我想不出任何CSS解决方案，因为没有任何可用方法可以通过CSS获得元素的高度。必须使用一小部分JS解决问题。

// get paragraphs height
let heightColA = document.querySelector('.col-a p').offsetHeight;
let heightColB = document.querySelector('.col-b p').offsetHeight;
// applying border after checking if either Col A or Col B has more height
if (heightColA > heightColB) {
  document.querySelector('.col-a p').style = 'border-right: 5px solid #fff; margin-right: -5px;'
} else {
  document.querySelector('.col-b p').style = 'border-left: 5px solid #fff; margin-left: -5px;'
}
// console.log(heightColA, heightColB)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
  background-color: #000;
  height: 500px;
  color: #fff;
}

.container>div {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .col-a {
  border-right: 5px solid #d00;
}

.container>div>p {
  padding: 2rem;
}

<div class="container">
  <div class="col-a">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, hic provident? Iste commodi neque corrupti debitis mollitia atque, eveniet iure!
    </p>
  </div>
  <div class="col-b">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, hic provident? Iste commodi neque corrupti debitis mollitia atque, eveniet iure! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima ipsum dolorem, nisi voluptates, rerum
      ipsa labore eius aliquam quas magni amet. Accusantium architecto perspiciatis, minus non voluptatibus totam sequi. Placeat sint error doloremque eveniet quibusdam quo delectus, laboriosam alias autem voluptatum unde eum, officiis omnis vel molestias
      dolorem distinctio nulla! Voluptatem qui explicabo corrupti autem consequuntur cupiditate sequi quos reprehenderit velit, porro, assumenda, officiis deserunt! Corrupti qui perspiciatis nemo. Repellendus qui facilis similique earum molestias distinctio
      quae sed, laboriosam laudantium corporis, suscipit, dolor accusamus pariatur iste nam. Exercitationem ab vitae eveniet. Blanditiis, facilis quidem eos ad aut quibusdam laudantium a!
    </p>
  </div>
</div>

尝试增加任何列中的内容，白色分隔线将相应增加。

希望这回答问题。