将包含iframe的div放在屏幕的右侧？
将包含iframe的div放在屏幕的右侧？
提问于 2019-09-20 05:21:10
我已经在桌面上成功地用了十几种不同的方法，但似乎没有一种方法在手机上有效。
我尝试过：-相对位置，绝对位置-浮动-各种宽度，页边距和填充的组合-我甚至尝试使用1x2表格，其中第一个单元格使用宽度将第二个单元格向右推
这件事能做到吗？我真的看过吗？
如何在屏幕右侧定位包含iframe的div？
回答 2
Stack Overflow用户
发布于 2019-09-20 05:58:20
您可以尝试在iframe周围放置一个包装器，然后定位包装器。
css
body {
position: relative;
width: 100%;}
.wrapper {
position: absolute;
right: 0;}html
<div class="wrapper">
<iframe src="https://www.w3schools.com">
</iframe>
</div>在没有看到页面和iframe的完整html/css的情况下，这是我最好的建议。iframe本身可以(并且很可能)有它自己的CSS，所以也要记住这一点。
下面是一个有效的https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2示例
iframe内容在我的手机上没有正确加载，但是iframe框仍然在那里并且定位在右边。
Stack Overflow用户
发布于 2019-09-20 16:10:43
好了，我终于用表处理了一些类似的事情。不仅在右手边，而且在右下角，这是一个进一步的目标。
<table id="table"><tr>
<td id="cell1"> </td>
<td id="cell2">
<div id="video">
<iframe src="https://www.youtube.com/embed/.......></iframe>
</div>
</td>
</tr></table>html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#table {
height:100%;
width:100%;
}
#cell1 {
width:100%;
}
#video {
position: absolute;
width: 50vmax;
height: 50vmax;
right: -25vmax;
padding-bottom: 20vmax;
}
#video iframe {
border: 0px;
padding-bottom: 20vmax;
padding-top: 0vmax;
width: 20vmax;
height: 20vmax;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58019075
复制相关文章
相似问题
腾讯云开发者
