Позиционирование средствами css объекта, вставляемого с Одноклассников

Рейтинг: 0Ответов: 1Опубликовано: 14.01.2023

Не получается разместить на странице div-контейнер с содержимым, которое прописывается по средством JavaScript с сайта Одноклассники. Хочу поместить данный объект, представляющий из себя gif-файл, обернутый в div-контейнер, получаемый ссылкой с сайта Одноклассники, в правый верхний угол, рядом с рисунком. Желательно, что бы контейнер вставал рядом (в линию) с изображением, имел отступ от изображения 10px, и доходил до конца страницы (отступ от правого края сверху и сбоку 5px)

! function(d, id, did, st) {
  var js = d.createElement("script");
  js.src = "https://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
      if (!this.executed) {
        this.executed = true;
        setTimeout(function() {
          OK.CONNECT.insertContentWidget(id, did, st);
        }, 0);
      }
    }
  };
  d.documentElement.appendChild(js);
}(document, "ok_content_widget", "https://ok.ru/group/54787859349522/album/54787860660242/941139944722", '{"topicTextIsFull":1}');
img {
  height: 400px;
  width: 600px;
}

.ok_content {
  position: absolute;
  left: 700px;
  bottom: 430px;
  width: 300px;
  height: 100px;
  border: 0;
  padding: 0;
  margin: 0;
}
<img src="../img/hefekranz-6166511_1920.jpg" alt="sweet bread">
<main>
  <div id="ok_content_widget" class="ok_content"></div>
</main>

Пытался менять размер div-контейнера (класс ok_content), делать отступы, но ничего не получается, не могу ровно разместить объект. Он занял место справа вверху, но при этом не могу растянуть содержимое контейнера так, что бы было от рисунка до края экрана. Сейчас размер маленький, и увеличивая размер контейнера наблюдается наложение содержимого контейнера на рисунок. Исправить не получается.

css javascript позиционирование
Источник: Stack Overflow на русском

Ответы

▲ 0

Выровнял элементы, но забыл сказать, что верстаю в Opera GX. Так что теперь другая проблема - как расположить эти элементы так же, но в других браузерах?

Код CSS работает только для Opera GX, код HTML выше

img  {
   width: 54.5%;
   height: 450px;
}


#ok_content_widget{
   position: absolute;
   left: 600px;
   bottom: 482px;
   width: 45%;
   height: 100px;
}

Открывая страницу в других браузерах, картинка меняется и необходимо снова подстраивать размеры, а в Opera вообще не видно div-контейнера с gif-элементом.