css - 我的 div 从下到上排列，而不是从上到下排列

Question

我有 6 种不同类型的 div、4 个容器和 2 个内容 div，内容 div 会多次打印不同的内容。

<div id="MainContainer">

      <div class="box_container">
        <div class="box_container_left">
          <div class="box_content_left">
             Test
          </div>
        </div>


        <div class="box_container_right">
          <div class="box_content_right">
             Test2
          </div>
        </div>
 </div>

如果 div 大小相同，则没有问题，布局看起来也符合预期，但如果我向 div 添加一行，或添加另一个内容 div，布局就会出错。

我做了一些测试，底部的 2 个 div 似乎是链接在一起的，从那一点开始上升。

.box_container{
        background-color:white;
        border: solid 3px black;
}

.box_container_left{
    position:relative;
    display:inline-block;
    width:40%;
    min-height:500px;
    background-color:red;
    border: solid 3px black;
}

.box_container_right{
    position:relative;
    display:inline-block;
    width:40%;
    min-height:500px;
    background-color:blue;
    border: solid 3px black;
}

.box_content_left{
    margin-top:3%;
    margin-left:10%;
    margin-right:10%;
    width:80%;
    background-color:green;
    min-height:20px;
    word-wrap: break-word;
    border: solid 3px black;
}

.box_content_right{
    margin-top:3%;
    margin-left:10%;
    margin-right:10%;
    width:80%;
    min-height:20px;
    background-color:purple;
    word-wrap: break-word;
    border: solid 3px black;
}

我没能找到问题所在，所以如果您知道问题出在哪里，我感谢您的帮助。

Answer 1

您只需要 float 您的box_container_left:

.box_container_left {
    float: left;
}

http://jsfiddle.net/2p32M/1/