«display: flex» внутри column-count отображает один столбец в Firefox и IE

Мне нужно иметь макет с двумя столбцами и снова два столбца внутри каждого столбца. Я использовал следующий код, который хорошо отображается в 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>

Изменить – извините за дефис. Меня тоже смутил :(

Причина, по которой я использовал количество столбцов, заключается в том, что я не знаю, сколько пар ключ-значение я получу. Может два, может шесть, может восемь. Но я все еще хочу, чтобы они были в две колонки. Вот изображение желаемого макета: введите здесь описание изображения


css flexbox css-multicolumn-layout column-count
person Sven    schedule 21.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Первое, что я заметил, это то, что ваш селектор CSS dl.name-value не соответствует элементу HTML <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>

Это может или не может решить вашу проблему. Но ясно, что использование гибкого контейнера внутри блока с несколькими столбцами отображается по-разному в основных браузерах. Если вы можете опубликовать более подробную информацию о макете, который вы хотите, возможно, мы сможем найти стабильное решение с column-count, flex или grid.

person Michael Benjamin    schedule 21.03.2018
comment
Отличный ответ. На ум приходят слова игла и стог сена. - person Gerard; 21.03.2018
comment
Очень хороший ответ! - person Xoog; 21.03.2018
comment
Я понимаю, должно быть приятно быть язвительным, но вы превратили настоящий вопрос в вопрос о неправильном персонаже. - person Sven; 27.03.2018