如何将您的 iframe 定位为低于其他(并排)?

Question

我正在努力让最后一个 iframe 低于这两个 iframe，换句话说，这两个必须像往常一样保持在那里。而最后一个 iframe 应该在下面通过里面有开关按钮。

<!---iframes for both temp, illuminance and button-state.
--->
<br/>
<div class = "box">
<iframe src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align="left">
</iframe>
</div>
<div class="box">
<iframe src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align="right">
</iframe>
</div>
<br/>
<div class = "row">
<div class = "col-md-4">
<div class = "iframe-container">
<iframe  src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align = "middle">
</iframe>
</div>
</div>
</div>
<div class="clear">
</div>
<!----Toggle button for switching On/Off when is clicked.
---->
<div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-danger locked_active">OFF</button>
<button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<br/>
<!---DatePicker for startDate and endDate.
----> 
<div class="d-flex justify-content-start">
<div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" id="startdate" placeholder="startdate"/>
<span class="input-group-addon">To</span>
<input type="text" class= "input-sm form-control"id ="enddate" placeholder="enddate"/>
</div>
</div>
</div><br>
<br>

Answer 1

我终于明白了，请参阅下面的演示，这是我的最后一个 iframe 应该是。

<br/>
<div class="frame-wrap">
<iframe src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" class="frame2" frameborder="0" scrolling="no" width="100%" height="250">
</iframe>
<!----Toggle button for switching On/Off when is clicked.
---->
<div class = "wrapper" align = "center">
<div class="btn-group" id="toggle_event_editing">
<button type="button" class="btn btn-danger locked_active">OFF</button>
<button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<br/>
.frame2 {
display: inline-block;
box-sizing: border-box;
}