为了账号安全,请及时绑定邮箱和手机立即绑定

flexbox javascript从cms动态加载

flexbox javascript从cms动态加载

慕村225694 2021-10-29 15:00:00
我正在尝试在 Javascript 中创建一个 flexbox 以从我的 CMS 加载多个项目。应该有 3 个图像代表每行的项目,因此我定义了一个具有 row wrap 属性的 flexbox ..容器元素具有固定的宽度和高度,因此我希望循环运行 4 次,创建 4 个堆叠在一行中的项目,最后一个从下一行开始。我在代码片段中得到了什么是全屏宽度的 4 个项目。我在屏幕上看到的真实图片是 1 张图片,就是这样..谁能解释为什么会这样?    var flexbox_projects = document.createElement("div");    flexbox_projects.className = "flex-container";    flexbox_projects.id = "flexbox_projects";    document.getElementById("body").appendChild(flexbox_projects);    for (i=0; i<4; i++){      var container_project = document.createElement("div");      container_project.className = "container_project";     document.getElementById("flexbox_projects").appendChild(container_project);      var image_project = document.createElement("img");      image_project.className = "main_picture";      image_project.src = "img/trailrun.jpg";      container_project.appendChild(image_project);    }.container_project{    width: 23vw;    height: 13vw;}.main_picture{    width: 100%;    height: 100%;    z-index: 2;}.flex-container{    display: flex;    flex-flow: row wrap;}<body id="body"></body>
查看完整描述

1 回答

?
qq_花开花谢_0

TA贡献1835条经验 获得超7个赞

正如我在评论中所说

我认为这是因为 // PROJECT STYLING 和 // PROJECT CONTAINING FLEXBOX STYLING 不是有效的注释

如果你想在 CSS 中评论,请使用 /* my comment */


查看完整回答
反对 回复 2021-10-29
  • 1 回答
  • 0 关注
  • 128 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信