html - 为什么我不能用垂直线将 div 减半

Question

我有一个大容器，里面有两个 div，我想用垂直线分隔这些内部 div，我把我试过的东西贴了下来，在另一个例子中，CSS 代码工作正常，但在这种情况下不工作。HTML

<div class="rowFrame"> 
    <div class="col-sm-6">
        <h3>Info:</h3>
        <p>About</p>
        <p>About</p>
    </div>

    <div class="col-sm-6 rightcontact" >
         <h3>Contact us</h3>
    </div>
</div> 

CSS

    .container2{
    border-style: solid;
    border-width: 3px;
    display: inline-block;
    width:100%;
   }

.rowFrame{
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px;
}

Answer 1

所以你想要在两个 div 之间有一条垂直线？只需为两个 div 之一添加边框。如果你想要全宽，你需要让你的容器流畅。这是一个同时显示全宽和普通容器的示例。

全宽示例(流体容器)

jsfiddle demo

html

<div class="container-fluid" id="mycontainer">
  <div class="col-sm-6" id="one">
    <h3>Info:</h3>
    <p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
    <p>Podelite sa nama Vase misljenje.</p>
  </div>



  <div class="col-sm-6" id="two" >
    <h3>Kontaktirajte nas</h3>
      some text here... bla bla bla
  </div>
</div>

CSS

#mycontainer{
    border:1px solid black;
    overflow: hidden;

}

#one{
    border-right:1px solid black;
}

普通容器

jsfiddle demo

html

<div class="container" id="mycontainer">
  <div class="col-sm-6" id="one">
    <h3>Info:</h3>
    <p>Ukoliko imate neko pitanje budite slobodni i pitajte nas!</p>
    <p>Podelite sa nama Vase misljenje.</p>
  </div>



  <div class="col-sm-6" id="two" >
    <h3>Kontaktirajte nas</h3>
      some text here... bla bla bla
  </div>
</div>

CSS

#mycontainer{
    border:1px solid black;
}

#one{
    border-right:1px solid black;
}