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

Question

我们假设我在顶部有2 <div>，在<div>

下面有1 <div>长|-----------| |----------| | | | | | Div1 | | | | | | Div2 | | | | | |-----------| | | |----------| |----------------------------| | | | DIV 3 | |----------------------------|

期望的输出！

<div>

Div 1 的

高度和宽度以及 Div 2 将取决于其内在内容。所以它可能会变得越来越大。

我的问题是， DIV 3 如何从上面的 |-----------| |----------| | | | | | Div1 | | | | | | Div2 | | | | | |-----------| | | |-----------------------------------| | | | DIV 3 | |-----------------------------------| 调整其比例？在上述情况下， DIV 2 会变长并导致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>

请注意，在上图中， div 3 会阻止超大 div 2 。

这是我的代码，用于此错误：

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

#divforimg{ 
    float: left;
}

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

和 CSS ：

found > len(string)

请帮助我。

Answer 1

您可以使用浮动或内联阻止您的第一个和第一个第二个div＆amp;给它一个宽度。

<强>样本

.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>

Answer 2

将您的CSS更改为以下内容：

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

#divforimg{ 
    float: left;
}

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

这使得底部div相对于屏幕底部，具体取决于您最大的div。