Question

我在定位垂直线时遇到问题。这是项目： https://prnt.sc/wp2vh4

div class="col span-1-of-2"

将这两个列表分开但是 - 它们之间的“中心”有一条灰色的垂直线。当我为第一个 div 设置 border-right 时，它也位于右侧。如何让这条线更居中？

两个元素是块 - 应该与它相关联吗？但我不想“破坏”列系统。

Answer 1

您基本上可以取两列并给它们每个半像素的 box-shadow（并排总计 1px）。半像素不适用于边框声明。

.container {
  display: flex;
  height: 150px;
}

.col {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
}

.left {
  box-shadow: .5px 0 0 #000;
}

.right {
  box-shadow: -.5px 0 0 #000;
}

<div class="container">
  <div class="col left">Left</div>
  <div class="col right">Right</div>
</div>

Answer 2

有很多方法可以做到这一点，另一种解决方案是使用旧的 columns css 属性，就像这样

.container {
   columns: 2;
   column-gap: 0;
   column-fill: balance;
   column-rule: 2px solid #ff44cc;
   
   text-align: center;
   padding: 10px;
}

<div class="container">
    <div>Block</div>
    <div>Block</div>
</div>

选择最适合您的解决方案。

Answer 3

有很多方法可以实现列之间的垂直分隔线。

选项 #1

最简单的方法是利用 CSS flex-box 创建列。这将导致容器中的两列具有相同的高度，您可以使用边框来创建视觉分隔线。

/* this section illustrates the container sizes */

#container {
    border: 1px dashed #dadada;
    padding: 2px;
}

.col {
  padding: 20px;
  font-family: Helvetica, Arial, Sans-serif;
  background: tan;
  border: 1px dashed #333;
}

/* this shows the solution */

#container {
  display:flex;
  justify-content: space-between;
}
.col {
  flex-basis: 50%;
}
.col:first-child {
  border-right: 3px solid aqua;
}

<div id="container">
   <div class="col">Column 1</div>
   <div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>

选项#2

在父容器上使用 pseudo element 创建边框。

/* this section illustrates the container sizes */

#container {
  border: 1px dashed #dadada;
  padding: 2px;
}

.col {
  padding: 20px;
  font-family: Helvetica, Arial, Sans-serif;
  background: tan;
  border: 1px dashed #333;
}

/* The solution */
#container {
  position: relative;
  overflow: auto;
}
#container:before {
  content: '';
  width: 2px;
  background: aqua;
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.col {
  float:left;
  width: calc(50% - 42px);
  /* need to remove the border & padding width from the full width */
}

<div id="container">
<div class="col">Column 1</div>
<div class="col">Column 2 with lots of content that makes it much taller than the other column and messes with heights.</div>
</div>

选项 #3

真的有更多的选择，CSS 渐变背景、阴影、CSS 网格、CSS 列，这个列表还在继续。

两个div之间的垂直线？

3 个答案:

选项 #1

选项#2

选项 #3