javascript - 请教一个固定布局和遍历div的问题？

Question

如图所示大的div固定在第一个，其中1234div是for循环出来的，这种布局能实现吗？或者有没有更好的方案

Answer 1

grid布局完美解决！！！

布局是这样的，第一个固定的，其他动态渲染出来。

<div class="box">  <div class="box-item">固定不动</div>  <div class="box-item">其他1</div>  <div class="box-item">其他2</div>  <div class="box-item">其他3</div>  <div class="box-item">其他4</div>  <div class="box-item">其他5</div>  <div class="box-item">其他6</div>  <div class="box-item">其他7</div></div>

然后就是样式，grid布局，一行两列，固定不动的占据两行一列。其他的自动排列。

.box {  display: grid;  grid-template-columns: repeat(2, 1fr);  border: 1px solid #eee;  gap: 10px;  padding: 5px;}.box .box-item {  border: 1px solid #eee;}.box .box-item:first-child {  grid-row-start: 1;  grid-row-end: 3;}

效果是这样的，

Answer 2

当然，我可以帮助您实现这种布局。首先，让我们假设您有一个基本的 HTML 结构，如下所示：

<div class="container">  <div class="header">...</div>  <div class="main">...</div></div>

接下来，您可以使用 CSS 来实现所需的布局。要固定 .header 元素在第一个位置，您可以将它设置为 position: sticky，并设置一个相对于父元素 .container 的偏移量。然后，您可以使用 Flexbox 或 Grid 布局来排列 .main 元素中的子元素（1,2,3,4 divs）。

下面是 CSS 代码的示例：

.container {  position: relative;  height: 100vh; /* 确保容器占据整个视口高度 */}.header {  position: sticky;  top: 0;  /* 其他样式，如背景色、边框等 */}.main {  display: flex; /* 或 display: grid */  flex-wrap: wrap; /* 或 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) */}.main div {  /* 根据需要设置样式，如宽度、高度、背景色等 */}

如果您想在 .main 元素中循环创建 div，可以使用 JavaScript（例如，使用 document.createElement 方法）或服务器端的语言（例如，使用循环语句和模板引擎）来动态创建 HTML。下面是一个使用 JavaScript 的示例：

const mainDiv = document.querySelector('.main');for (let i = 1; i <= 4; i++) {  const div = document.createElement('div');  div.textContent = i;  mainDiv.appendChild(div);}

希望这可以帮助您实现所需的布局。如果您有任何进一步的问题或需要更多的解释，请随时提问！