“display：flex”里面的“column-count”在Firefox和＆amp ;;中呈现单列IE

Question

我需要在每个colunn中再次使用两列布局和两列。我使用了以下代码，这些代码在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>

编辑 - 关于连字符的sry。我也很困惑:(

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

Answer 1

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

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

我检查了与SCSS，HTML定义列表（<dl>），CSS特异性及其组合相关的问题。没有。我还在纯CSS中运行代码。仍然没有。

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

的示例

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

好吧，最终，在将选择器剥离到单个字符后，结果是连字符（-）成了问题。 HTML中使用的连字符与CSS中使用的连字符不同。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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