Разместите div, содержащий iframe, в правой части экрана?

Question

Мне удалось сделать это дюжиной различных способов на рабочем столе, но на мобильном телефоне, похоже, ничего не работает.

Я пробовал: - относительные позиции, абсолютные позиции - плавающие - различные комбинацииширина, поля и отступы - я даже пытался использовать таблицу 1x2, где первая ячейка использовала ширину, чтобы сдвинуть вторую ячейку вправо

Можно ли это сделать?Конечно, я видел, как это было сделано?

Как вы размещаете div с iframe в правой части экрана?

Answer 1

Вы можете попытаться поместить оболочку вокруг iframe, а затем расположить ее.

css

body {
  position: relative;
  width: 100%;}
.wrapper {
  position: absolute;
  right: 0;}

html

<div class="wrapper">
  <iframe src="https://www.w3schools.com">
  </iframe>
</div>

Не видя весь HTML /CSS как на странице, так и в фрейме, это лучшая рекомендация, которую я имею.Сам iframe может (и, вероятно, имеет) свой собственный CSS, так что имейте это в виду.

Вот рабочий пример https://www.w3schools.com/code/tryit.asp?filename=G86JSY65NPG2

Содержимое iframe не загружалось должным образоммой мобильный телефон, но окно iframe все еще там и расположено справа.

Answer 2

ОК, наконец-то мне удалось что-то подобное с помощью таблиц.Не только с правой стороны, но и справа внизу, что было еще одной целью.

<table id="table"><tr>
    <td id="cell1">&nbsp;</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;
}