如何在一个 div 中央画一条竖线？

Question

我该如何在一个div的中间画一条竖线？也许我应该在这个div里面放置两个div，一个左边加上左边框，另一个右边加上右边框？我有一个DIV标记，我需要在左边放置一个ascx（它会不时地被另一个ascx替换），然后在右边放置一个静态ascx。您有什么好的建议吗？也许我已经回答了自己的问题。

任何指针都将非常有用。

- Hcabnettek

---

你是想要两列，其中一列包含一个ascx文件，另一列包含另一个ascx文件，并在中间用一条线分隔开，对吗？ - user1228

什么是ascx？ - j08691

Answer 1

虽然这个问题是9年前提出的，很多答案都可以“work”。但是CSS已经发展到现在，你现在可以使用一行代码来完成它，而不必使用calc。

一行代码（2018）：

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

如何工作：

1. linear-gradient(#000, #000)创建一个background-image，以便我们以后可以使用background-size来包含它。
2. no-repeat防止渐变在放上background-size时重复。
3. center- 这是background-position，也就是我们放置“分界线”的位置。
4. /2px 100% - 将图像设置为2像素宽，并占用其所在元素的100％。

这是扩展版：

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

- jnowland

---

也适用于IE11。 - Dmitry

在我的解决方案中，该行匹配了上面的边框。在我放置您的解决方案的div上，该行偏移了1像素。我在最后添加了这个CSS规则来修复它：background-position-x: calc(50% - 1px); - Millar248

你愿意把这个放进代码片段里吗？ - Joe Sadoski

这是一个老但好的东西，非常适用于 WP Gravity Form，否则需要进行一些严重的重新排列才能实现 UI 设计师想要的效果。 - Aaron Belchamber

Answer 2

也许这可以帮助你

.here:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
    transform: translate(-50%);
}

div {
    margin: 10px auto;
    width: 60%;
    height: 100px;
    border: 1px solid #333;
    position:relative;
    text-align:center
}

<div class="here">Content</div>

这是一个JSFiddle演示。

- ddjikic

---

根据您的CSS和DOM设置，您可能需要将z-index：-1更改为z-index：0。如果此答案中的div和类在浏览器的开发人员控制台中可见，但该行未出现，请首先尝试更改z-index值。 - Rick Gladwin

你可以用pointer-events:none替换z-index:-1，并保持:after在最上层。 - V.Volkov

Answer 3

这里有一种更为现代的方法，在一个 div 中画一条线。只需要一点 css：

.line-in-middle {
    width:400px;
    height:200px;
   background: linear-gradient(to right, 
                               transparent 0%, 
                               transparent calc(50% - 0.81px), 
                               black calc(50% - 0.8px), 
                               black calc(50% + 0.8px), 
                               transparent calc(50% + 0.81px), 
                               transparent 100%); 
 }

<div class="line-in-middle"></div>

适用于所有现代浏览器。 http://caniuse.com/#search=linear-gradient

- Samuel Neff

---

@Kamil Kiełczewski只是想提醒其他人，因为他提供的链接上说IE11支持，这是正确的，但代码不起作用。 - Jerick Allan Sernal Dimaano

@JerickAllanSernalDimaano 在我安装的IE 11版本11.413.15063.0上工作。你看到它无法工作的是哪个版本？你看到了什么？ - Samuel Neff

@Samuel Neff，我的IE版本是11.713.10586.0。这是我看到的内容：http://imgur.com/a/sffzK - Jerick Allan Sernal Dimaano

@JerickAllanSernalDimaano 很有趣。如果我在网页上更改缩放设置（ctrl-+），就可以发生这种情况，即使我将其设置回100％，也无法修复（直到刷新）。感谢您分享屏幕截图。IE很糟糕，但我们必须处理它。:( - Samuel Neff

Answer 4

刚刚测试过，可行：

<div id="left" style="width:50%;float:left;background:green;">left</div>
<div id="right" style="margin-left:50%;border-left:solid 1px black;background:red;">right</div>

- user1228

Answer 5

这是我做的版本，使用 linear-gradient 制作渐变中线。

.block {
      width:400px;
      height:200px;
      position:relative;
 }
.block:before {
      content:"";
      width:1px;
      height:100%;
      display:block;
      left:50%;
      position:absolute;
     background-image: -webkit-linear-gradient(top, #fff, #000, #fff);
      background-image: -moz-linear-gradient(top, #fff, #000, #fff);
      background-image: -ms-linear-gradient(top, #fff, #000, #fff);
      background-image: -o-linear-gradient(top, #fff, #000, #fff);
      background-image: linear-gradient(top, #fff, #000, #fff);
 }

<div class="block"></div>

- AG_

---

你为什么在这里使用:before？ - Ndrslmpk

Answer 6

我认为你需要一个带有背景图的包装div。如果没有，那么你就不能保证边框从顶部到底部都是一样的。

<div class="wrapper">
    <div>Float this one left</div>
    <div>float this one right</div>
</div>

请务必在左右留出空格，以便图片能够显示。

你需要使用以下样式：

.wrapper{background:url(img.jpg) 0 12px repeat-y;}

- easement

Answer 7

我认为你的多DIV方法是处理这个问题最明智的方式：

<DIV>
   <DIV style="width: 50%; border-right: solid 1px black">
      /* ascx 1 goes here */
   </DIV>
   <DIV style="width: 50%">
      /* ascx 2 goes here */
   </DIV>
</DIV>

- Ryan Brunner

---

刚刚检查了一下，除非你编辑并添加一个浮点数，否则这个不起作用。 - user1228

如果左边比右边短，我认为边框不会覆盖整个高度。 - easement

Answer 8

三个 div？

<div>
   <div>
      /* ascx 1 goes here */
   </div>
   <div style="width:1px; background-color: #000"></div>
   <div>
      /* ascx 2 goes here */
   </div>
</div>

- Supertux

---

你需要问自己一个问题……当所有内部div的高度不同时，它是否能正常工作。 - ddjikic