html - 如何将您的 iframe 定位为低于其他(并排)?
问题描述
我正在努力让最后一个 iframe 低于这两个 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>
解决方案
我终于明白了,请看下面的演示,这是我最后一个 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;
}
推荐阅读
- flutter - 如何将查询长度放入文本小部件?
- graph - 有没有办法让这个贝叶斯图在乳胶中更漂亮?
- visual-studio-code - vscode扩展GitLens,如何关闭下图的功能?
- .net - 使用oracle实体框架核心从.net core 3.1将Json obj ac Clob保存在Oracle DB中
- c# - 在每个请求中处理来自洋葱架构中标头的数据
- pine-script - 无法使用参数调用“strategy.order”(id=literal string,stop=series[float]);
- haskell - 在 Haskell 中建模单曲面相干性
- flutter - sqflite 与颤振的连接导致我出错
- php - 如何在 symfony 中使用自定义 gitlab 存储库
- javascript - 在类“a”中调用的“b”类的模拟方法