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

I have one big container, and inside I have two div, I want to separate these internal divs with vertical line, I posted down what I tried, on another example thats CSS code work correctly, but in this case not working. HTML

我有一个大容器，里面我有两个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

CSS

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

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

3 个解决方案

#1

So you want a vertical line between the two divs? Just add a border to one of the two divs. If you want full width you need to make your container fluid. Here is an example showing both full width and normal container.

那么你想要两个div之间的垂直线？只需为两个div中的一个添加边框即可。如果你想要全宽，你需要让你的容器流动。这是一个显示全宽和普通容器的示例。

full width example (fluid container)

全宽示例（流体容器）

jsfiddle demo

jsfiddle演示

html

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

CSS

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

}

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

normal container

普通容器

jsfiddle demo

jsfiddle演示

html

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

CSS

#mycontainer{
    border:1px solid black;
}

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

#2

If you do what @primeape91 is suggesting you'll also need to include the clearfix hack to get the float to act like a block again.

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

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

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

#3

I made a few changes but here's a basic example of what you can do:

我做了一些更改，但这是一个基本的例子，你可以做什么：

HTML

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

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

在Codepen上查看