html - 如何使用 CSS 在两个框之间包含垂直线

Question

我正在尝试将两个图像添加到两个由垂直线分隔的框中，以便在较小的设备中查看时它显示为均分并消失。请参阅下面的示例代码链接。你能告诉我我错过了什么吗？

HTML

<div class="container-fluid">
    <div class ="row">
        <div class="col-md-6">
            <div class="box1">
            <p align="center"> box1
            </div>
        </div>
    <div class="col-md-1 hidden-xs hidden-sm">
        <p class="vertical_line"> &nbsp </p>
    </div>
        <div class="col-md-6">
            <div class="box2">
            <p align="center"> box2
            </div>
        </div>              
    </div>
</div>

CSS

    body {
    background: #000000; 
    padding: 5px 5px;
    font-family: Helvetica, courier, Georgia, Serif,  "Times New Roman";
}
container-fluid {
    width: 100%;
}

vertical_line{
    border-right:1px solid #333;
    float:center;
    height: 500px;
    width: 1px;
}

box1 {
    width: 100%;
    height:600px;
    border: 2px solid grey;
    padding: 5px;
    margin: 5px 0px 5px 0px ;
}


box2 {
    width: 100%;
    height:600px;
    border: 2px solid grey;
    padding: 5px;
    margin: 5px 0px 5px 0px ;
}

Answer 1

你可以只给 border-left 给 box-2 div。然后您可以将其隐藏在平板设备上。

<div class="container-fluid">
  <div class ="row">
    <div class="col-md-6">
        <div class="box1">
          <p align="center"> box1
        </div>
    </div>
    <div class="col-md-6">
        <div class="box2">
          <p align="center"> box2
        </div>
    </div>              
  </div>
</div>

.col-md-6{
  padding: 0
}
.box1,
.box2{
  background: #f5f5f5
}

.box2{
 border-left: 1px solid #ccc;
}
@media(max-width: 768px){
  .box2{
    border-left: 0;
  }
}

查看演示 here .