Выравнивание div-ов. Получение длины div-а

Question

Есть div-ы

#choosedatetimebegin {
    display: flex;
    align-items: center;    
}

.labeldatetimebegin {
    width:  305px;
}

.datetimeinput {
    width: 100%-305px;
}

#chooseduration {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.duration {
    width: 424px;
}

.durationinput {
    width: 100%-424px;
}

<div id="choosedatetimebegin">
  <div class="labeldatetimebegin">Дата/время</div>
  <div class="datetimeinput"><input type="datetime-local" id="datetimebegin" name="datetimebegin" step=1></input>
  </div>
</div>
<div id="chooseduration">
  <div class="duration">Продолжительность</div>
  <div class="durationinput"><input type="time" step='1' min="00:00:00" max="23:59:59" id="durationtime"></div>
</div>

Каким образом можно получить длину div-ов в htmlи php (в js как я понимаю у элемента есть свойство width), чтобы не вручную подгонять по размеру элементы, а с учетом вычисленной длины labeldatetimebegin, duration?
Вообще каким образом можно получить длину div-а (где угодно), чтобы в дальнейшем ее можно использовать для выравнивания (приведите пример)?

Answer 1

Вопрос не совсем понятен, зачем вычислять ширину. Уточните что вы хотите получить, зачем вам ширина.

Пример - все инпуты одинаковой ширины:

#choosedatetimebegin,
#chooseduration {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

input {
  width: 100%;
}

#chooseduration {
  margin-top: 10px;
}

<div id="choosedatetimebegin">
  <div class="item labeldatetimebegin">Дата/время</div>
  <div class="item datetimeinput"><input type="datetime-local" id="datetimebegin" name="datetimebegin" step=1></input>
  </div>
</div>
<div id="chooseduration">
  <div class="item duration">Продолжительность</div>
  <div class="item durationinput"><input type="time" step='1' min="00:00:00" max="23:59:59" id="durationtime"></div>
</div>

Пример - все колонки с инпутами 30% от ширины колонки:

#choosedatetimebegin,
#chooseduration {
  display: grid;
  grid-template-columns: auto 30%;
}

input {
  width: 100%;
}

#chooseduration {
  margin-top: 10px;
}

<div id="choosedatetimebegin">
  <div class="item labeldatetimebegin">Дата/время</div>
  <div class="item datetimeinput"><input type="datetime-local" id="datetimebegin" name="datetimebegin" step=1></input>
  </div>
</div>
<div id="chooseduration">
  <div class="item duration">Продолжительность</div>
  <div class="item durationinput"><input type="time" step='1' min="00:00:00" max="23:59:59" id="durationtime"></div>
</div>

Список литературы: тег label Вычисления в CSS, функция calc() Верстка grid Так же пригодится величины max(), min(), minmax(), max-content и min-content

БЛОГ НА HUSL

Выравнивание div-ов. Получение длины div-а

Ответы (1 шт):