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

​

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

我使用列计数的原因是我不知道我将得到多少键值对。也许两，也许六，也许八。但我还是想把它们列在两栏里。下面是所需布局的图像：

​

Answer 1

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

​

​

我检查了引号，但没问题。有时从字处理器(如MS Word)复制的引号在CSS中是无效的。

我检查了有关SCSS、HTML (<dl>)、CSS特性及其组合的问题。没什么。我还用普通的CSS运行代码。还是一无所获。

我检查了一下display: flex在多列布局中是否无效。但事实证明，声明中没有任何内容符合。下面是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还是网格。