css - 如何在 div 的中心放置一条垂直线？

Question

如何在 div 中间放置一条垂直线？也许我应该在 div 中放置两个 div，并在一个上放置一个左边框，在另一个上放置一个右边框？我有一个 DIV 标签，我需要在左侧放置一个 ascx(它会不时地与另一个 ascx 交换)，然后在左侧放置一个静态 ascx。关于我应该怎么做的任何想法？也许我回答了我自己的问题。

任何指针都会很棒

Answer 1

虽然这个问题是 9 年前提出的，但很多答案都“有效”。 CSS 已经发展，您现在可以在一行中完成，而无需使用 calc。

一类(2018)答案:

背景:线性渐变(#000, #000) 无重复中心/2px 100%;

这是如何运作的

1. linear-gradient(#000, #000) 这会创建一个 background-image 因此我们稍后可以使用 background-size 来包含
2. no-repeat 当我们在其上放置 background-size 时，这会阻止渐变重复。
3. center - 这是background-position 这是我们放置“潜水线”的地方
4. /2px 100% - 这使图像宽度为 2px 并且 100% 是您放入的元素。

这是扩展版:

  background-image: linear-gradient(#000, #000);
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: center center;