Как я могу поместить вертикальную линию вниз по центру div?

Как поместить вертикальную линию вниз по середине div? Может быть, я должен положить два div в div и поставить левую границу на одной и правой границе на другой? У меня есть тег DIV, и мне нужно поставить один ascx слева (который будет время от времени меняться с другим ascx), а затем статический ascx слева. Любые идеи о том, как я должен это делать? Возможно, я ответил на свой вопрос.

Любые указатели будут большими

Ответы

Ответ 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>

Ответ 2

Здесь более современный способ рисовать линию вниз по 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>

Ответ 3

Просто испытал это; работы:

<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

Я думаю, вам нужен оберточный 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;}

Ответ 5

Я думаю, что ваш множественный подход 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>

Ответ 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>

Ответ 7

Три divs?

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