问答博客资讯标签用户活动
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

布局一个类似于表格的弹性框？

社区维基
1
新手上路，请多包涵

我正在使用内部开发的框架，该框架依赖于我们的 HTML 的特定结构。棘手的事情之一是每一行都需要有自己的容器，有自己的类和数据属性。

所以这就是问题所在。在不彻底改变 DOM 的情况下，我怎样才能使下面的弹性框基本上像 HTML 表格一样呈现？还是只有一张桌子？该解决方案必须在 IE11 和 Chrome 中都有效。

我试图让它看起来像这样……

 Column A      |      Column B      |      Column C
1             |      2             |      3


 section {
  display: flex;
  flex-wrap: wrap;
}

section .col {
  flex: 1 1 auto;
}

section .line-break {
  flex-basis: 100%;
  width: 0px;
  height: 0px;
  overflow: hidden;
}

 <html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="line-break"></div>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

原文由 Steve Wortham 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssflexbox
阅读 650
2 个回答
得票最新
社区维基
1
✓ 已被采纳

如果您要呈现的内容是 表格数据 类型，那么 table 是正确的方法。

HTML 5.1 W3C 建议，2016 年 11 月 1 日，4.9 表格数据

鉴于您不能或不想更改标记，这可以使用 CSS Table 来完成，并且可以在任何显示类型之间轻松切换，例如 flex 、 block 等，甚至 float ，使用媒体查询等。

我还删除了 <div class="line-break"></div> 元素，因为您不需要，但如果它由组件或类似组件呈现，则保持原样不会造成任何问题。

使用 CSS 表

 section {
  display: table;
  width: 100%;
}

section > * {
  display: table-row;
}

section .col {
  display: table-cell;
}

 <html>
  <head>
  </head>
  <body>
    <section>
      <header>
        <div class="col">Column A</div>
        <div class="col">Column B</div>
        <div class="col">Column C</div>
      </header>
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
      </div>
    </section>
  </body>
</html>

如果您仍然需要或必须使用 Flexbox，我的这个答案提到了 CSS Table 和 Flexbox 在两个重要特性上的区别：

更新了一个示例，展示了一些有用的 Flexbox 内容，具有不同的宽度和跨度列。

使用弹性盒

 .tbl {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  min-height: 50px;
}
.cell {
  flex: 4;
  border: 1px solid red;
}
.cell:nth-child(1) {
  flex: 1;
}
.cell:nth-child(2) {
  flex: 2;
}
.cell.span4-5 {
  flex: 8 24px;                    /*  col 4,5 flex-grow/border/padding  */
}
.cell.span3-4 {
  flex: 8 24px;                    /*  col 3,4 flex-grow/border/padding  */
}
.cell.span3-5 {
  flex: 12 36px;                   /*  col 3,4,5 flex-grow/border/padding  */
}
.row:first-child .cell {
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */
}
.row .cell {
  padding: 5px;
  box-sizing: border-box;
}

 <div class="tbl">
  <div class="row">
    <div class="cell">ID </div>
    <div class="cell">Nr </div>
    <div class="cell">Header 1 </div>
    <div class="cell span4-5"> Header 2 </div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
    <div class="cell">Content</div>
  </div>
  <div class="row">
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell span3-5">Content</div>
  </div>
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell span3-4">Content</div>
    <div class="cell">Content</div>
  </div>
</div>

原文由 Asons 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1
 header, .row {
  display: flex;  /* aligns all child elements (flex items) in a row */
}

.col {
  flex: 1;        /* distributes space on the line equally among items */
}

 <section>
  <header>
    <div class="col">Column A</div>
    <div class="col">Column B</div>
    <div class="col">Column C</div>
  </header>
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</section>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

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