Проблема с вертикальной линией между двумя divs '

Question

Я пытаюсь создать вертикальную линию, которая делит два div с словом OR в середине линии (линий). Я хотел бы, чтобы вертикальные линии охватывали всю высоту, вместо этого они в настоящее время по 1px. Css должен быть отзывчивым, а высота полей формы изменяется в зависимости от выбора, поэтому я не могу использовать фиксированную высоту.

<section> 
    <div class="row"> 
     <div class="col-md-5">FORM FIELDS LEFT</div> 
     <div class="col-md-2"> 
     <div class="col-md-12 v-separator"></div> 
     <div class="col-lg-12" style="text-align: center">OR</div> 
     <div class="col-md-12 v-separator"></div> 
     </div> 
     <div class="col-md-5">FORM FIELDS RIGHT</div> 
    </div> 
</section> 

.col-md-2,.col-md-5,.col-md-12 
{ 
    float:left; 
    position:relative; 
    min-height:1px; 
    padding-right:15px; 
    padding-left:15px 
} 
.col-md-2{width:16.66666667%} 
.col-md-5{width:41.66666667%} 
.col-md-12{width:100%} 
.v-separator 
{ 
    left:50%; 
    top:10%; 
    bottom:10%; 
    border-left:1px solid black; 
} 
.row{margin-right:-15px;margin-left:-15px} 
.row:after,.row:before{display:table;content:" "} 
.row:after{clear:both} 

Answer 1

Я бы рекомендовал использовать :before и :after на родительском DIV или секции, чтобы создать линию и OR. Я изменил .col-md-5 на .col-md-6, поэтому каждый из них занимает 50% от родительского. Таким образом, вам не нужны лишние элементы html, они автоматически растут с высотой, и они идеально сосредоточены внутри родителя. Вам нужно будет настроить divs с полями формы в них для интервала.

EDIT ДЛЯ КОММЕНТАРИЕВ

для маленьких экранов, если высота равна, вы можете изменить :before иметь width: auto; height: 1px.

Если высоты не равны, и поскольку линия отображается ровно посередине, вы хотите использовать их в запросе на медиа (@media (min-width: 600px){} или любой другой ширине, которые они бок о бок), чтобы показывать только тогда, когда они бок о бок. Если они не равны по высоте, вы все равно можете имитировать это при меньших размерах, используя граничный снизу в верхнем div.

.row:after,.row:before{display:table;content:""} 
 
.row:after{clear:both} 
 

 
.v-separator .col-md-6:first-child { 
 
border-bottom: 1px solid black; 
 
padding-bottom: 15px; 
 
margin-bottom: 15px; 
 
position: relative; 
 
} 
 

 
.v-separator .col-md-6:first-child:after { 
 
content: 'OR'; 
 
display: block; 
 
color: black; 
 
width: 30px; 
 
height: 30px; 
 
line-height: 30px; 
 
bottom: -15px; 
 
background: white; 
 
padding: 3px; 
 
position: absolute; 
 
text-align: center; 
 
left: 0; 
 
right: 0; 
 
margin: auto; 
 
box-sizing: border-box; 
 
} 
 

 
@media (min-width: 600px){ 
 
.col-md-2,.col-md-6,.col-md-12 
 
{ 
 
    float:left; 
 
    position:relative; 
 
    min-height:1px; 
 
    padding-right:15px; 
 
    padding-left:15px; 
 
    box-sizing: border-box; 
 
} 
 
.col-md-2{width:16.66666667%} 
 
.col-md-6{width:45%;} 
 
.col-md-6 + .col-md-6 {float: right;} 
 
.col-md-12{width:100%} 
 

 
.v-separator .col-md-6:first-child { 
 
    border-bottom: 0; 
 
    padding-bottom: 0; 
 
    margin-bottom: 0; 
 
} 
 

 
.v-separator .col-md-6:first-child:after { 
 
    display: none; 
 
} 
 

 
/* added v-separator:before, :after and position: relative below */ 
 
.v-separator:before { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    left:0; 
 
    right: 0; 
 
    top:10%; 
 
    bottom:10%; 
 
    margin: auto; 
 
    width: 1px; 
 
    background: black; 
 
} 
 

 
.v-separator:after 
 
{ 
 
    content: 'OR'; 
 
    position: absolute; 
 
    display: block; 
 
    background: white; 
 
    padding: 3px; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    margin: auto; 
 
    color: black; 
 
    text-align: center; 
 
} 
 

 
.v-separator {position: relative;} 
 

 
.row{position: relative;margin-right:-15px;margin-left:-15px} 
 
}

<section class="v-separator"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
      FORM FIELDS LEFT<br> 
 
      FORM FIELDS LEFT<br> 
 
      FORM FIELDS LEFT<br> 
 
      FORM FIELDS LEFT<br> 
 
      FORM FIELDS LEFT<br> 
 
      FORM FIELDS LEFT 
 
     </div> 
 
     <div class="col-md-6"> 
 
      FORM FIELDS RIGHT<br> 
 
      FORM FIELDS RIGHT<br> 
 
      FORM FIELDS RIGHT<br> 
 
      FORM FIELDS RIGHT<br> 
 
      FORM FIELDS RIGHT<br> 
 
      FORM FIELDS RIGHT 
 
     </div> 
 
    </div> 
 
</section>

Answer 2

Вы можете добавить вертикально повторяющуюся 1px фон на средней колонке. Что-то вроде:

.your-class { 
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=') repeat-y 50%; 
} 

Answer 3

я несколько изменил свой HTML для this fiddle, но только 1 Seperator и имеют срок с белым фоном и отцентрировать его.

В основном мы помещаем границу в правый столбец и абсолютное позиционирование диапазона, поэтому оно выглядит расколотым.

На скрипке я добавил height на .col-md-6, но это только для целей показа. Я предполагаю, что оба ваши дивы будет такой же высоты,

<section> 
<div class="row" id="some-container"> 
    <span id="seperator">OR</span> 
    <div class="col-md-6">FORM FIELDS LEFT</div> 
    <div class="col-md-6" id="right">FORM FIELDS RIGHT</div> 
</div> 
</section> 

#some-container { 
    position: relative; 
} 
#right { 
    border-left: 1px solid gray; 
} 
#some-container #seperator { 
    display: inline-block; 
    padding: 1em; 
    background-color: #fff; 
    position: absolute; 
    z-index:1; 
    transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
}