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

Question

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

任何指针都会很棒

Answer 1

也许这可以帮到你

.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演示。

Answer 2

这是一种在div中划一条线的更现代的方法。只需要一点点css：

int locator(char *Bigptr, char *Smallptr) {
int count = 0;
    for (; *Bigptr != '\0'; Bigptr++) {
        if (*Smallptr == *Bigptr) {
            for (; (*Smallptr == *Bigptr) != '\0'; Smallptr++, Bigptr++) {}
            if (*Smallptr == '\0') {
                return count;
            }
            else {
                cout << "small is not the subset of big" << endl;
                return 0;
            }
        }
        count++;
    }
return 0; 

.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%); 
	}

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

Answer 3

尽管这个问题是9年前问的，但很多答案都可以“奏效”。 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;

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>

Answer 5

我认为你需要一个带有背景图像的包装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;}

Answer 6

这是我的版本，使用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>

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>

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>