flexbox javascript从cms动态加载
我正在尝试在 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>
慕村2256941回答
-
qq_花开花谢_0
正如我在评论中所说我认为这是因为 // PROJECT STYLING 和 // PROJECT CONTAINING FLEXBOX STYLING 不是有效的注释如果你想在 CSS 中评论，请使用 /* my comment */
随时随地看视频慕课网APP
相关分类
JavaScript