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

Answer 2

我做了一些改动，但这是你可以做的基本例子：

HTML

<div id="container">
  <div 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 id="two">
    <h3>Kontaktirajte nas</h3>
  </div>
</div>

CSS

  #container {
    height: 500px;
    border: medium black solid;
  }
  #container div {
    height: 100%;
    padding-left: 20px;
  }
  #one {
    width: 50%;
    float: left;
    border-right: thin black solid;
  }
  #two {
    overflow: hidden;
    border-left: thin black solid;
  }

View on Codepen

Answer 3

如果你这样做@ primeape91建议你还需要包含clearfix hack来让浮动再次像块一样。

div.rowFrame:after {
  content: "";
  display: table;
  clear: both;
}

div.rowFrame > div {
   width:50%;
   float:left;
}

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

3 个答案: