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

您可以在中间列上添加垂直重复的1px背景。类似的东西：

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

Answer 2

我稍微更改了this fiddle的HTML，但只有1个分隔符，并且跨度为白色背景并居中。

基本上我们在右栏放置一个边框并对跨度进行绝对定位，因此看起来很分裂。

在小提琴上我在height上添加了.col-md-6，但这仅用于显示目的。我假设你的两个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%;
}

Answer 3

我建议在父div或部分上使用:before和:after来创建行和OR。我已将.col-md-5更改为.col-md-6，因此每个人占据了父母的50％。通过这种方式，您不需要不必要的html元素，它会自动随高度增长，并且在父级内完全居中。您需要使用其中的表单字段调整div以进行间距。

编辑评论

对于小屏幕，如果高度相等，您可以将:before更改为width: auto; height: 1px。

如果高度不相等并且因为线条恰好在中间显示，那么您将要在媒体查询中使用这些内容（@media (min-width: 600px){}或它们并排的任何宽度）只显示他们并排时。如果它们的高度不相等，您仍然可以使用顶部div上的border-bottom以较小的尺寸模仿它。

＆＃13;

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

＆＃13;

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

＆＃13;

两个div之间的垂直线问题＆＃39;

3 个答案: