Как закрепить фиксированную высоту <div>в правом нижнем углу <td>, не вмешиваясь в содержимое выше?

Question

1) Основная проблема.

Я знаю, что это длинное изложение проблемы, но, пожалуйста, потерпите меня. Проблема довольно проста, но мне нужно немного, чтобы настроить ее для вас.

У меня есть таблица 5x7, представляющая 5 временных интервалов в день с 7 классными комнатами в каждом. У <td> есть сложная внутренняя HTML-структура, содержащая заголовок класса и имя инструктора, а также описание класса и биографию инструктора, которые заполняют модальные диалоговые окна, всплывающие при нажатии на заголовок или имя.

Мне нужно добавить <div> (счетчик регистрации в реальном времени), привязанный к нижнему правому углу <td>, чтобы он не вторгался в контент над ним.

2) Настройка проблемы.

HTML для типичного <td> выглядит следующим образом.

          <td id="x0900A">                  <!-- 0900 room A -->
            <div class="classTitle"></div>
            <div class="classDescrip"></div>
            <div class="instructor"></div>
            <div class="gender"></div>
            <div class="instructorBio"></div>
            <div class="instructorImg"></div>
            <div id="x0900A-roomCount" class="roomCount">
              <div class="regis">registered</div>
              <div class="cap">capacity</div>
            </div>
          </td>

Название, имя преподавателя и количество комнат отображаются в ячейке. Другие <div> с display {hidden;}. Их содержимое заполняется модальными диалоговыми окнами, которые всплывают при щелчке по названию или имени.

С помощью этого CSS я могу заблокировать .roomCount в правом нижнем углу.

    td {
      position: relative;
    }
    .roomCount{
      position: absolute;
      right: 0;
      bottom: 0;
      tex-align: right;
    }

Но в некоторых ячейках его текст прямо примыкает к имени инструктора над ним. В других нет. Когда это произойдет, имя неразборчиво.

Данные таблицы находятся на сервере Amazon Web Services. С помощью JavaScript при каждой загрузке страницы я динамически извлекаю его и создаю таблицу.

Вы можете увидеть все это на работе на этой ручке на CodePen.

3) Мне нужно решение, которое не перестраивает HTML.

Мне нужно, чтобы .roomCount не примыкал к имени инструктора, как это происходит в некоторых клетках.

Я не возражаю против реструктуризации HTML, но я тупо написал JavaScript, зависящий от позиций элементов в <td>. (Это был мой первый раз. Что я могу сказать?) Мне пришлось бы переписать JS, что я тоже не прочь сделать, но у меня нет времени, прежде чем я должен запустить сайт в прямом эфире.

Итак, мне нужно решение без реструктуризации элементов HTML в <td> s.

4) Любая помощь?

Любая помощь?

Большое спасибо за то, что прочитали это далеко. Ваша помощь будет принята с благодарностью. На самом деле, если вы можете решить это, я полирую вашу обувь в течение шести месяцев. (Надеюсь, вы носите кроссовки.)

Answer 1

Проблема вызвана тем, что .classTitle имеет разную высоту, поскольку длина содержимого отличается. Высота всех тд в одном ряду одинакова. Когда .classTitle занимает больше места, у .roomCount остается меньше места внизу. И с position: absolute он перекрывается с .instructor

Вы можете попробовать добавить фиксированную высоту к .classTitle и .instructor. Таким образом, вы можете удалить position: absolute из .roomCount.

.classTitle {
    padding: 5px;
    font-size: 1.05em;
    text-align: left;
    color: #00b8b8;
    height: 4em;     /* Added Sample Height */
}

.instructor {
    margin: 0 0 10px 0;
    padding: 0 3px 0 3px;
    font-size: .85em;
    text-align: right;
    color: #00b8b8;
    height: 1.2em;     /* Added Sample Height */
}

.roomCount {
    /* position: absolute; */
    /* bottom: 0; */
    /* right: 0; */
    text-align: right;
}

Answer 2

Жестоким способом является увеличение размера нижнего отступа или поля на имя инструктора.

.schedule p {
    line-height: 1.2em;
    padding: 10px 5px 0px 5px;
    margin: 0 0 25px 0;
}

Это даст больше места под названием курса. Если вы хотите использовать его только под инструктором, измените блок css инструктора на

.schedule p.instructor {
    margin: 0 0 25px 0;
    padding: 10px 5px 0px 5px;
    font-size: .85em;
    text-align: right;
    color: #00b8b8;
}

Свойства margin и padding в вашем правиле .instructor в настоящее время игнорируются, поскольку .schedule p обладает более высокой специфичностью.