css - “display: flex” 内的 "column-count"在 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>

编辑 – 对连字符感到抱歉。我也很困惑:(

我使用列计数的原因是我不知道我将获得多少个键值对。也许两个，也许六个，也许八个。但我仍然希望它们分成两列。这是所需布局的图像:

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 中无效。但事实证明声明中没有任何内容匹配。这是 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 或网格。