我正在尝试在 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 */
添加回答
举报
0/150
提交
取消