Блог

Главная - Вопросы по программированию - динамический div не отображается

динамический div не отображается

#javascript #html

#javascript #HTML

Вопрос:

Я написал простой код для отображения динамического div (переписанный из учебника), изменил его, чтобы сделать div img-оболочкой. Но изображение не отображается. Что я делаю не так?

Вот мой код:

div1.php:

 <html>
<body>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<script>

$(document).ready(function() {
    $('#outerdiv').append(
    $('<div>').prop({
    id: 'myDiv',
    //innerHTML: 'Hi there!',
    className: 'img-wrapper'
    })
    );
});

$(this).css('height',"100px");

var get_a_image = "http://iancaple.ru/upload/images/20200804_225812.jpg";
    
$('#myDiv').append($('<img id="theImg2">').attr({
    'src': get_a_image , //'https://'   imgUrl ,
    'alt': 'test image '
    })
    ).scrollTop(9999)
</script>
    
</body>
<html>

Ответ №1:

 $(document).ready(function() {
  $('#outerdiv').append(
    $('<div>').prop({
      id: 'myDiv',
      innerHTML: 'Hi there!',
      className: 'img-wrapper',
    })
  );
});

$(this).css('height', "100px");

var get_a_image = "http://iancaple.ru/upload/images/20200804_225812.jpg";

$(document).ready(function() {
  $('#myDiv').append(
    $('<img>').prop({
      id: 'myDiv',
      'src': get_a_image, //'https://'   imgUrl ,
      'alt': 'test image ',
      'width': 200
    })
  );
}); 
 <div id="outerdiv"></div>

Сначала вставьте HTML div с идентификатором outerdiv, затем измените код js с помощью функции document.ready

Комментарии:

1. Я сделал, как вы сказали. Теперь он показывает изображение, но: 1) изображение отображается в полном размере, а не в img-оболочке, и самое главное: 2) мне нужно иметь изображение в динамически создаваемом myDiv, а не в уникальном outerdiv. (Мне нужно отобразить несколько изображений в цикле) Ps я также добавил css для отображения img-оболочки

2. Css: .img-wrapper { переполнение: авто; высота: 200 пикселей; размер: оба; цвет фона: синий; положение: относительное; переполнение-x: авто; переполнение-y: авто; } .img-wrapper > img { отображение: блок; высота: авто; ширина: 100%; позиция: абсолютная; /* top: -50%; */ vertical-align: top; }

3. Вы можете использовать атрибут width элемента HTML, как я, нет, изображение находится в div с классом img-wrapper, в вашем CSS вы также должны указать ширину в .img-wrapper, например width: 400px, и я думаю, что переполнение не требуется

4. Теперь возникла новая проблема. Как я уже сказал, мне нужно отображать изображения в цикле. Но мне нужно отобразить некоторую информацию между ними. Например, ссылки на изображения и информацию о пользователе (таблица html). Теперь, когда я поместил outerdiv в начало своего кода, все изображения отображаются в верхней части моей страницы. Но мне нужно, чтобы они были распределены по всей странице

5. Вы можете оформить .img-оболочку с помощью display:block, чтобы изображения перемещались вертикально, и вы можете поместить некоторое пространство над каждым изображением, используя .img-wrapper img { margin-top:30px }

Метки: