兩個div之間的垂直線的問題'

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父股利或部分創建行和OR。我已將.col-md-5更改爲.col-md-6，因此每個都佔用了家長的50％。這樣你就不需要不必要的html元素，它會隨着高度自動增長，並且完全居於父級中心位置。您需要調整div的格式字段以保證間距。

編輯註釋

爲小屏幕，如果高度是平等的，你可以改變:before有width: auto; height: 1px。

如果高度不相等，並且由於該線完全顯示在中間，則您需要在媒體查詢（@media (min-width: 600px){}或任何並排的寬度）中使用這些查詢以僅在它們顯示時顯示並排。如果它們的高度不相等，則仍然可以通過在頂部div上使用border-bottom來模仿較小的尺寸。

.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個分隔符，並有一個白色背景上的跨度和居中。

基本上我們把右邊的一個邊框和絕對定位的跨度，所以它看起來分裂。

在小提琴上，我在.col-md-6上加了一個height，但這只是爲了顯示目的。我假設你都div一定是相同的高度

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