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，那么布局就会出错。

我做了一些测试，看起来底部的两个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/

Answer 2

为vertical-align:top;和.box-container_left添加.box_container_right。这是更新Jsfiddle

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

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

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

2 个答案: