css - 如何搭配
跨越两堆的高度
只用 CSS 创建伪表？

Question

<div>我有两个并排堆叠的“列” ，并且<div>每列中有相同数量的 s。每个div都相当于一个表格行。但是，由于它不是真正的表格，如果div左侧堆栈/列中的内容行数多于div右侧列中对应的内容行，则“行”将不会对齐。我想知道如何设置divs 的高度以相互匹配。

这是问题的图片。您可以在第三行中看到行拆分的位置。

这是在 Mediawiki 农场上设置的，由于它和所使用的扩展的一些限制，我无法在此处访问 html 或在此处创建真正的表格，并且希望有一个纯 CSS 的解决方案。我已经研究过calc()在样式表中使用和变量，display:table但我无法理解它。

<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

<!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

<!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

对于当前的 CSS，我只是将两个部分设置为 50% 宽度和向左浮动（以及其他不相关的东西）。

score 0 · Accepted Answer

您可以通过运行一些荒谬的 js 计算和断言 div 高度的代码设置来实现这一点。

相反，我提倡使用 css flex setup 进行另一种代码设置。

请参阅Flexbox 完整指南。

.prop { display:flex; }
.key { flex-shrink:0; flex-grow:0; flex-basis:25%; }

<section class="header">
  <h2> Attributes </h2>

  <section class="content">
    <div class="prop">
      <div class="key"> Darkvision </div>
      <div class="val"> The helm allows the wearer to see in dim light. </div>
    </div>
    <div class="prop">
      <div class="key"> Thick Skin </div>
      <div class="val"> Grants immunity to poison. </div>
    </div>
    <div class="prop">
      <div class="key"> Invulnerability </div>
      <div class="val"> Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf </div>
    </div>
    <div class="prop">
      <div class="key"> Shapeshift </div>
      <div class="val"> The helm gives the wearer the ability to take any form. </div>
    </div>
  </section>
</section>

score 0 · Accepted Answer

从您的 HTML 代码，没有 JavaScript ，网格也是一种可能性：

一个将每行设置为相同高度的示例....不幸的是，有些看起来很空，除非可以将短内容对齐到中心

body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: grid;
  grid-auto-rows: 1fr;/* here is the handy part */
  border: solid 1px;
}

section>div {
  border: solid 1px;
  padding: 0.15em
}


/* only for the demo and a touch of flex ;)  */

section>section>div {
  display: flex;
  align-items: center;
}

section>section:first-of-type>div {
  justify-content: center;
}

<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

use display:contents使 div 成为具有网格布局集的父部分的直接子代。行将匹配它们的最大内容......但这是一种解决方法/技巧，并非每个浏览器都能理解：

body>section {
  display: grid;
  grid-template-columns: 1fr 3fr;
  width: 800px;
  grid-auto-flow: row dense;
  max-width: 100%;
  margin: auto;
}

body>section>h2 {
  grid-column: 1/ span 2;
}

body>section>section {
  display: contents
}

section>div {
  border: solid;
}

h2+section>div {
  grid-column: 1;
}

h2+section+section>div {
  grid-column: 2;
}

<!--The Header -->
<section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes">
  <h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background">Attributes</h2>

  <!--The first column -->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name">
      <div class="pi-data-value pi-font">Darkvision</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name">
      <div class="pi-data-value pi-font">Thick Skin</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name">
      <div class="pi-data-value pi-font">Invulnerability</div>
    </div>
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name">
      <div class="pi-data-value pi-font">Shapeshift</div>
    </div>
  </section>

  <!--The second column-->

  <section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc">
    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1">
      <div class="pi-data-value pi-font">The helm allows the wearer to see in dim light.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2">
      <div class="pi-data-value pi-font">Grants immunity to poison.</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3">
      <div class="pi-data-value pi-font">Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf</div>
    </div>

    <div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4">
      <div class="pi-data-value pi-font">The helm gives the wearer the ability to take any form.</div>
    </div>
  </section>
</section>

Javascript 确实可以提供帮助，但重新考虑 HTML 结构可能是明智之举。

我不建议使用display:contents 方法：请参阅 https://caniuse.com/css-display-contents上的支持

这里有一个提示：如果您可以阅读和理解没有任何样式的内容，那么您的文档就可以了。如果每件事都混为一谈，那可能就是搜索引擎和其他媒体读者的看法。

最后，这是我的意见（你可以跳过它）

您的内容似乎应该得到一个真正的 HTML 表格。此类内容的真实表格是合适的，如果需要的话，还有一些方法可以使表格响应。

css - 如何搭配跨越两堆的高度只用 CSS 创建伪表？

2 回答 2

Related

Reference

css - 如何搭配
跨越两堆的高度
只用 CSS 创建伪表？