How to have auto space between texts for image

Question

I am creating a website in which there are lots of paragraphs. And in-between I want to show the image, for that the text should automatically shift down.

Please help me out!

Try to run sinppet code in full page.

See the Snippet...

window.onload = function() {
  setTimeout(func1, 2000);

};

function func1() {
  document.getElementById("my_div").className = "show";
}

.hide {
  display: none;
}

.show {
  width: 100%;
  top: 5%;
  position: absolute;
  z-index: 1;
}

.advt {
  border: none;
  width: 100%;
  max-height: 100%;
}

.advtimg {
  width: 100%;
  height: 50px
}

<script type="text/javascript">
  // place your images in this array
  var random_images_array = ['1.png', '2.png', '3.jpg', '4.jpg'];

  function getRandomImage(imgAr, path) {
    path = path || 'http://cocvidarbha.epizy.com/images/advertisment/'; // default path here
    var num = Math.floor(Math.random() * imgAr.length);
    var img = imgAr[num];
    var imgStr = '<img class="advt" src="' + path + img + '" alt = "">';
    document.write(imgStr);
    document.close();
  }
</script>
<div id="my_div" class="hide">
  <div class="advtimg">
    <script type="text/javascript">
      getRandomImage(random_images_array)
    </script>
  </div>
</div>
hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf
52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656
xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds
6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd
sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd
sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg
xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv

Please help me out!

Answer 1

Logical Child question.

There is no code for auto spacing text for the image, but you can place the code:-

<div class="advtimg">
    <script type="text/javascript">
      getRandomImage(random_images_array)
    </script>
  </div>

where you want to display the image.

As @alfredo answered you have to edit that too.

As you require your code the code top: 5%; and z-index: 1; is not necessary.

I have coded the correct coding as you want in the snippet.

Hope, I helped you!

window.onload = function() {
  setTimeout(func1, 2000);

};

function func1() {
  document.getElementById("my_div").className = "show";
}

.hide {
  display: none;
}

.show {
  width: 100%;
  position: relative;
}

.advt {
  border: none;
  width: 100%;
  max-height: 100%;
}

.advtimg {
  width: 100%;
  height: 50px
}

<script type="text/javascript">
  // place your images in this array
  var random_images_array = ['1.png', '2.jpg', '3.jpg', '4.jpg'];

  function getRandomImage(imgAr, path) {
    path = path || 'http://cocvidarbha.epizy.com/images/advertisment/'; // default path here
    var num = Math.floor(Math.random() * imgAr.length);
    var img = imgAr[num];
    var imgStr = '<img class="advt" src="' + path + img + '" alt = "">';
    document.write(imgStr);
    document.close();
  }
</script>
hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf
52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656
xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds
6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd
sdfds 6656 xdgf 52456fv<div id="my_div" class="hide">
  <div class="advtimg">
    <script type="text/javascript">
      getRandomImage(random_images_array)
    </script>
  </div>
</div> hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd
sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg
xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv hjgjhgjhg gvfhgfgh sdfgfdg xgffsd sddfsd sdfds 6656 xdgf 52456fv

Answer 2

something like this ?

<html>
<body>
    <div id="container"></div>
    <script>
        (function () {
            var imgAr = [
                {img: '1.png', alt: 'image 1'},
                {img: '2.png', alt: 'image 2'},
                {img: '3.png', alt: 'image 3'},
                {img: '4.png', alt: 'image 4'},
            ]

            var paragraphs = [
                {paragraph: "blabla0"},
                {paragraph: "blabla1"},
                {paragraph: "blabla2"}
            ];

            var path = 'http://cocvidarbha.epizy.com/images/advertisment/';
            var container = document.getElementById('container');
            for (var i = 0; i < paragraphs.length; i++) {
                var num = Math.floor(Math.random() * imgAr.length);
                var img = paragraphs[i].img = '<img class="advt" src="' + path + imgAr[num].img + '" alt = "' + imgAr[num].alt + '">';
                container.innerHTML = container.innerHTML + '<div id="paraph_' + i + '"><p>' + paragraphs[i].paragraph + '</p>' + img + '</div>';
            }
        })();
    </script>
</body>

Answer 3

The reason the text is not shifting down is because .show has position: absolute;. Change that to position:relative; like this

.show {
  width: 100%;
  top: 5%;
  position: relative;
  z-index: 1;
}