"column-count" 中的 "display: flex" 在 Firefox 和 IE 中呈现单列

Question

我需要有一个两列布局和两列在每个列内。我使用以下代码在 Chrome 和 Safari 上呈现不错，但在 Firefox 和 IE 的单列中：

我做错了什么？

.two-columns {
  column-count: 2;
  dt,
  dd {
    break-inside: avoid;
    column-break-inside: avoid;
  }
}

dl.name-value {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  dt {
    padding-right: 0.5rem;
    width: 40%;
    text-align: right;
  }
  dd {
    width: 60%;
    margin-left: auto;
  }
}

<div class="two-columns">
  <dl class="name–value">
    <dt>Milkman</dt>
    <dd>A man with a milk</dd>
    <dt>Postman</dt>
    <dd>A man with a post</dd>
    <dt>Manila</dt>
    <dd>A man with ila</dd>
    <dt>Layman</dt>
    <dd>A husband</dd>
  </dl>
</div>

编辑 - 请注意连字符。我也很困惑:(

我使用 column-count 的原因是我不知道我会得到多少个键值对。也许两个，也许六个，也许八个。但我仍然希望它们分为两列。这是所需布局的图像：

Answer 1

我注意到的第一件事是您的 CSS dl.name-value 选择器与 HTML <dl class="name-value"> 元素不匹配。在所有浏览器检查器中，CSS 代码都没有显示。

我检查了引号，但它们很好。有时从文字处理器（例如 MS Word）复制的引号在 CSS 中无效。

我检查了与 SCSS、HTML 定义列表 (<dl>)、CSS 特异性及其组合相关的问题。没有什么。我还用纯 CSS 运行代码。还是什么都没有。

我检查了display: flex 在Multi-Column Layout 中是否无效。但事实证明，声明中的 nothing 匹配。这是background-color 的示例：

.two-columns {
  column-count: 2;
}

dl.name-value {
  background-color: green;
  height: 500px;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between;   */
}

dt {
  padding-right: 0.5rem;
  width: 40%;
  text-align: right;
}

dd {
  width: 60%;
  margin-left: auto;

}

dt,
dd {
  break-inside: avoid;
  column-break-inside: avoid;
}

<div class="two-columns">
  <dl class="name–value">
    <dt>Milkman</dt>
    <dd>A man with a milk</dd>
    <dt>Postman</dt>
    <dd>A man with a post</dd>
    <dt>Manila</dt>
    <dd>A man with ila</dd>
    <dt>Layman</dt>
    <dd>A husband</dd>
  </dl>
</div>

好吧，最终，在将选择器剥离为单个字符之后，事实证明连字符 (-) 是问题所在。 HTML 中使用的连字符与 CSS 中使用的连字符不同。

.two-columns {
  column-count: 2;
}

dl.name-value { /* hyphen (keyboard minus sign) now matches HTML class value */
  background-color: green;
  height: 500px;
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-between; */
}

dt {
  padding-right: 0.5rem;
  width: 40%;
  text-align: right;
}

dd {
  width: 60%;
  margin-left: auto;

}

dt,
dd {
  break-inside: avoid;
  column-break-inside: avoid;
}

<div class="two-columns">
  <dl class="name-value"><!-- hyphen (keyboard minus sign) now matches CSS selector -->
    <dt>Milkman</dt>
    <dd>A man with a milk</dd>
    <dt>Postman</dt>
    <dd>A man with a post</dd>
    <dt>Manila</dt>
    <dd>A man with ila</dd>
    <dt>Layman</dt>
    <dd>A husband</dd>
  </dl>
</div>

这可能会也可能不会解决您的问题。但很明显，在多列框中使用 flex 容器在主要浏览器中的呈现方式不同。如果您可以发布有关您想要的布局的更多详细信息，也许我们可以找到一个稳定的解决方案，使用column-count、flex 或 grid。