2

我需要在每个列内再次有一个两列布局和两列。我使用以下代码在 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 的原因是我不知道我会得到多少个键值对。也许两个，也许六个，也许八个。但我仍然希望它们分为两列。这是所需布局的图像： 在此处输入图像描述

4

1 回答 1

2

我注意到的第一件事是您的 CSS选择器与 HTML元素dl.name-value不匹配。<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 容器在主要浏览器中的呈现方式不同。如果您可以发布有关您想要的布局的更多详细信息，也许我们可以找到一个稳定的解决方案，无论是 with column-count、 flex 还是 grid 。

于 2018-03-21T13:57:43.480 回答