html - 如何根据上面 <div> 的大小调整 <div> 的位置？

Question

假设我有 2 <div>在顶部和 1 长 <div>在 2 <div> 下面

期望的输出!

|-----------|    |----------|
|           |    |          |
|   Div1    |    |          |
|           |    |    Div2  |
|           |    |          |
|-----------|    |          |
                 |----------|

|----------------------------|
|                            |
|          DIV 3             |
|----------------------------|

Div 1 和 Div 2 的

高度和宽度将取决于其内部内容。所以它可能会变得更长更大。

我的问题是，DIV 3 如何根据 <div> 调整其比例以上？在上述情况下，DIV 2 变长并导致 DIV 3 向下调整。

在我的例子中，DIV 3 阻止了 DIV 2。

    |-----------|    |----------|
    |           |    |          |
    |   Div1    |    |          |
    |           |    |    Div2  |
    |           |    |          |
    |-----------|    |          |
|-----------------------------------|                     
|                                   |
|               DIV 3               |
|-----------------------------------|  

请注意上图，div 3 挡住了超大尺寸的 div 2。

这是我针对此错误的代码:

<div id = 'divforimg'>
                        <img width="300px" height="300px" id = 'appimage'>
                        </div>

                        <div class = "divforinfo" id = "divinfo">
                            <i><p id = "appdesc"></p></i>
                            <strong>Price: </strong><label id = "appprice"></label><br>
                            <strong>Brand: </strong><label id = "appbrand"></label><br>
                            <strong>Color: </strong><label id = "appcolor"></label><br>
                            <strong>Model: </strong><label id = "appmodel"></label><br>
                            <strong>Available Quantity: </strong><label id = "appqty"></label><br>
                            <strong>Date Posted: </strong><label id = "appposted"></label><br>
                            <center><button class = "btn btn-primary" onclick = "hideDiv(2)">Edit Contents</button></center>
                        </div> 

<div id = "imagediv">
                        XX
                        </div>

还有 CSS:

#imagediv{
    height: 100px;
    width: 2000px;
    position: relative;
    bottom: -20%;
    background-color: #FFFFCC;
    overflow: scroll;
}

#divforimg{ 
    float: left;
}

.divforinfo {
    width: 200px;
    height: 200px;
    float: right;
}

请帮我解决这个问题。

Answer 1

你可以使用 float 或 inline-block 你的第一个和第二个 div 并给它一个宽度。

演示

.first-div {
  width: 50%;
  float: left;
  background-color: red;
}
.second-div {
  width: 50%;
  height: 200px;
  background-color: blue;
  float: left;
}
.third-div {
  clear: both;
  width: 100%;
  background-color: green;
}

<div class="first-div">
    <p>First div</p>
</div>
<div class="second-div">
    <p>Second div</p>
</div>
<div class="third-div">
    <p>Third div</p>
</div>