Вопросы Теги

Игнорирование одного столбца для расчета максимального содержимого сетки CSS

Джо Альбахари (автор C # 3.0 в двух словах и LINQPad) написал утилиту под названием PredicateBuilder, которая может использоваться для функций AND и OR.

http: //www.albahari. com / nutshell / predicatebuilder.aspx

Хотя он работает с функциями, он является открытым исходным кодом, поэтому вы можете проверить его и посмотреть, как он работает.

4
задан Vadim Ovchinnikov 19 January 2019 в 11:10
поделиться

1 ответ

Вместо max-content auto вы можете использовать auto 1fr и white-space:nowrap, как показано ниже: 

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

dt, dd {
  margin: 0;
  padding: 0;
}
.speaker {
  white-space:nowrap;
}

.speaker.stage-director {
  display: none;
}

.statement.stage-director {
  grid-column: span 2;
}
<dl>
  <dt class="speaker">ROMEO</dt>
  <dd class="statement">What, shall this speech be spoke for our excuse?
Or shall we on without a apology?</dd>

  <dt class="speaker stage-director"></dt>
  <dd class="statement stage-director">This is a long statement of the stage director</dd>

  <dt class="speaker">ROMEO</dt>
  <dd class="statement">Give me a torch: I am not for this ambling;
Being but heavy, I will bear the light.</dd>

  <dt class="speaker">The magic big cat</dt>
  <dd class="statement">I say nothing</dd>
  
  <dt class="speaker">MERCUTIO</dt>
  <dd class="statement">Nay, gentle Romeo, we must have you dance.</dd>
</dl>

0
ответ дан Temani Afif 19 January 2019 в 11:10
поделиться
Другие вопросы по тегам:

Похожие вопросы: