如何在div中间放一条垂直线?

How do I put a vertical line down the middle of a div? Maybe I should put two divs inside the div and put a left border on one and a right border on the other? I have a DIV tag and I need to put one ascx on the left (that will get swapped out from time to time with another ascx) and then a static ascx on the left. Any ideas on how I should do this? Maybe I answered my own question.

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

Any pointers would be great

任何指针都很好

7 个解决方案

#1

Maybe this can help you

也许这对你有帮助。

.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>

Here's is a JSFiddle demo.

这是一个JSFiddle的演示。

#2

Here's a more modern way to draw a line down a div. Just takes a little css:

这里有一种更现代的方法来绘制div的线条。

.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>

Works in all modern browsers. http://caniuse.com/#search=linear-gradient

适用于所有现代浏览器。http://caniuse.com/搜索=线性渐变

#3

Just tested this; works:

只是测试这个;工作原理:

<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>

#4

I think you need a wrapper div with a background image. If not, then you are not guaranteed to have the border go all the way from the top to the bottom.

我认为您需要一个带有背景图像的包装器div。如果没有，则不能保证边界从顶部一直到底部。

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

*be sure to leave the space between the left and right for the image to show up.

*确保在左边和右边之间留出空间以显示图像。

you'll need a style that looks like:

你需要一种风格:

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

#5

I think your multiple DIV approach is going to be the sanest way to approach this:

我认为你的多重分区方法将是最明智的方法来解决这个问题:

<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>

#6

This is my version, a gradient middle line using 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>

#7

Three divs?

三个div ?

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

#1