Question

我试图在单个div中添加多个div，并使用水平滚动。

这是我的代码：

  <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>

这是我的css代码：

#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;
}

我第一次使用java脚本和css all，所以我无法轻松完成这一步。请帮我解决这个问题。

我犯了什么错误，

Answer 1

相同的#id只能在文档中出现一次。

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

改为使用班级

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

和CSS

.block { ...

此外，更容易将属性直接添加到字符串

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

修改：修复style中的删除{}。

编辑：脚本中还有其他一些问题，这是一个有效的jsfiddle：https://jsfiddle.net/C14L/9hnqheos/

Answer 2

将Flex属性添加到容器中，同时保持溢出自动。如果使用Flex，则无需使用空格。

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

Answer 3

我没有将背景附加到div，而是创建img＆amp;将它附加在div中。

另外

希望这会有用

<强> 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%;
}

如果需要，您可以进行进一步的更改

Demo

Answer 4

根据C14L，需要分配类，并且由于您使用的是getElementByID，因此应为每个元素分配一个单独的ID。

在下面的JS Fiddle中，我已经为backgroundColor交换了backgroundImage，并删除了你的保证金代码（不知道你在这里尝试了什么，但你在第二次迭代时有100％的保证金，第三次有200％的保证金...不要以为这就是你想到的......为了演示目的，'block'的高度设置为30px而不是100％，因为div默认没有高度......

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+"%";
}

如何在单个div中添加多个div与水平滚动？

4 个答案: