问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
CaixK
    57825367667

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

    前端javascriptcsshtml5vue.js
    阅读 597
    avatarAI BotBETA

    当然，我可以帮助您实现这种布局。首先，让我们假设您有一个基本的 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);
}

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

    1 个回答
    得票最新
    头像
    hboot
      688
      ✓ 已被采纳

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

      效果是这样的，

      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题