如何使用水平滚动在单个div内添加多个div？

Question

I am trying to add multiple div inside a single div with horizontal scroll.

This is my code:

  <div id="scrollimages">
        <script>
            var container = document.getElementById("scrollimages");
            var array=["img/screen2.png","img/logo.png"];
            for(var i=0;i<array.length;i++)
            {
                var src="url("+array[i]+")";
//                var inside = '<div class="block" style="background-image: { ' + src + ' }"></div>';
                var inside = '<div class="blocks"></div>'
                inside.style.backgroundImage=src;
                inside.style.marginLeft=100*i+"%";
                container.innerHTML +=inside;


            }

            </script>
        </div>

This is my css code:

#scrollimages {
    background-color: #00FFFF;
    width: 100%;
    margin-left:0px;
    height: 150px;
    overflow: scroll;
     white-space:normal;
    overflow-y:none;
    margin-top:20px;
}
.blocks
{
    height: 100%;
    width: 100%
    margin-left:0px;
    word-wrap:normal;
}

First time i am using java script and css all ,so i can't get this easy step .help me out this problem.

what mistake i made,

Answer 1

The same #id can only be once in a document.

var inside = '<div id="block"></div>'

Use a class instead

var inside = '<div class="block"></div>'

and in CSS

.block { ...

Also, much easier, to add the attributes directly to the string

var inside = '<div class="block" style="background-image:'+ src +'"></div>';

Edit: fixed remove {} in style .

Edit: There were some other problems in the script, here is a working jsfiddle: https://jsfiddle.net/C14L/9hnqheos/

Answer 2

Add Flex property to the container, also keep overflow auto. If using Flex no need to use white-space.

#scrollimages {
display: flex;  
overflow: auto;
}

Answer 3

Instead of attaching background to div I am creating img & appending it inside the div.

Also

Hope this will be useful

JS

var container = document.getElementById("scrollimages");
var myArray=[image urls];
for(var i=0;i < myArray.length;i++){
var _createElem = document.createElement('div');
var _img = document.createElement('img')
_img.src = myArray[i]
 _createElem.id ="block_"+i;
_createElem.appendChild(_img)
_createElem.className = "block";
container.appendChild(_createElem);
}

CSS

#scrollimages {
    background-color: #00FFFF;
    width: 100%;
    margin-left:0px;
    overflow-x:scroll;
    margin-top:20px;

}
.block{
    width:auto;
    display:table-cell;
    height: 100%;
}

you can make further changes if it required

Demo

Answer 4

As per C14L, need to assign class, and since you're using getElementByID, each element should be assigned a seperate ID.

In the below JS Fiddle, I've swapped backgroundImage for backgroundColor, and removed your margin code (not sure what you were attempted here, but you had 100% margin on the 2nd iteration, 200% for the third... Don't think thats what you had in mind... For demo purposes, height of 'block' was set to 30px instead of 100% since divs have no height by default...

https://jsfiddle.net/7mua0rez/

var container = document.getElementById("scrollimages");
var array=["red","green", "black"];
for(var i=0;i<array.length;i++)
{
  var src=array[i];
  var inside = '<div id="block' + i + '" class="block"></div>'

    container.innerHTML +=inside;

  document.getElementById("block" + i).style.backgroundColor=src;
  document.getElementById("block" +i).style.marginLeft=10+"%";
}