Блог

Главная - Вопросы по программированию - Как я могу сделать так, чтобы абсолютные позиционированные DIVs разделяли ширину внешнего DIV?

Как я могу сделать так, чтобы абсолютные позиционированные DIVs разделяли ширину внешнего DIV?

#html #css

#HTML #css

Вопрос:

Для еженедельного календаря мне нужно расположить DIVs для событий во внешнем DIV на день.
Чтобы расположить эти DIVs в нужное время, я попытался использовать абсолютное позиционирование с верхним значением, но это приводит к тому, что DIVs накладываются друг на друга, если у меня одновременно несколько событий.
Теперь я хочу, чтобы эти DIVs «разделяли» ширину внешнего DIV.

Я уже пробовал решение flex, но, похоже, оно не работает с абсолютными позициями. Кроме того, помещение DIVS в дополнительный DIV для их позиционирования не является вариантом.

У кого-нибудь есть идея решения? Спасибо!

     .tagclmn {
        width: 300px;
        font: 12.0px Helvetica;
        position: relative;
    }
    
    .veranstaltung {
        border-radius: 4px;
        position: absolute;
        width: 100%;
    }
  
         <div class="tagclmn">
            <div class="veranstaltung" style="top: 200px; height: 200px; background-color: red;">
                <div class="container">
                    <div class="title">Testvorlesung</div>
                    <div class="time">10:00 - 12:00 st</div>
                    <div class="place">W.11.010</div>
                </div>
            </div>
            <div class="veranstaltung" style="top: 400px; height: 200px; background-color: green;">
                <div class="container">
                    <div class="title">Testvorlesung 2</div>
                    <div class="time">12:00 - 14:00 st</div>
                    <div class="place">W.11.010</div>
                </div>
            </div>
            <div class="veranstaltung" style="top: 400px; height: 200px; background-color: blue;">
                <div class="container">
                    <div class="title">Testvorlesung 3</div>
                    <div class="time">12:00 - 14:00 st</div>
                    <div class="place">W.11.003</div>
                </div>
            </div>
        </div>

Комментарии:

1. Абсолютные позиционированные элементы не занимают места в своем родительском элементе …. и не вносят вклад в макет. Возможно, вам придется пересмотреть свой подход.

2. Есть ли какая-либо конкретная причина для использования position: absolute для veranstaltung

Ответ №1:

Большая часть этого может управляться с помощью CSS-Grid.

Если мы знаем количество доступных полных часов, мы можем использовать это, чтобы задать количество строк для нашей сетки.

Допустим, мы ведем дневник с 9 утра до 5 вечера, это будет означать 8 строк.

Затем мы добавляем классы, чтобы сообщать каждой встрече, как долго она длится (span) и в какой час она начинается (start).

Затем:

 .tagclmn {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  display: grid;
  grid-template-rows: repeat(8, minmax(3em, 1fr));
  grid-gap: 4px;
}

[class^="span"] {
  grid-column: 1 / -1;
}

.span-2 {
  grid-row: 1 / span 2;
}

.span-3 {
  grid-row: 1 / span 3;
}

.start-2 {
  grid-row-start: 2;
}

.start-4 {
  grid-row-start: 4;
}

.start-8 {
  grid-row-start: 8;
} 
 <div class="tagclmn">
  <div class="veranstaltung span-2 start-2" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">10:00 - 12:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
  <div class="veranstaltung span-1 start-4" style="background-color: lightgreen;">
    <div class="container">
      <div class="title">Testvorlesung 2</div>
      <div class="time">12:00 - 13:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
  <div class="veranstaltung span-2 start-4" style="background-color: lightblue;">
    <div class="container">
      <div class="title">Testvorlesung 3</div>
      <div class="time">12:00 - 14:00 st</div>
      <div class="place">W.11.003</div>
    </div>
  </div>
  <div class="veranstaltung span-1 start-8" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">16:00 - 17:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>

  <div class="veranstaltung span-3 start-4" style="background-color: red;">
    <div class="container">
      <div class="title">Testvorlesung</div>
      <div class="time">12:00 - 15:00 st</div>
      <div class="place">W.11.010</div>
    </div>
  </div>
</div>

Примечание: порядок .veranstaltung в DOM НЕ связан с их визуальным порядком, что означает, что при условии применения правильных классов unility назначения могут добавляться в HTML непоследовательно.

Ответ №2:

Вы могли бы просто добавить ширину 50% и левую часть 50% ко второму элементу, но я не уверен, что это тот ответ, который вы ищете.

 <div class="tagclmn">
    <div class="veranstaltung" style="top: 200px; height: 200px; background-color: red;">
        <div class="container">
            <div class="title">Testvorlesung</div>
            <div class="time">10:00 - 12:00 st</div>
            <div class="place">W.11.010</div>
        </div>
    </div>
    <div class="veranstaltung" style="top: 400px; height: 200px; background-color: green; width:50%;">
        <div class="container">
            <div class="title">Testvorlesung 2</div>
            <div class="time">12:00 - 14:00 st</div>
            <div class="place">W.11.010</div>
        </div>
    </div>
    <div class="veranstaltung" style="top: 400px; height: 200px; background-color: blue;width:50%; left:50%">
        <div class="container">
            <div class="title">Testvorlesung 3</div>
            <div class="time">12:00 - 14:00 st</div>
            <div class="place">W.11.003</div>
        </div>
    </div>
</div>

Таким образом, вы также можете увеличить высоту урока 3. например, с 13:00 до 15:00, он все еще работает

Метки: ,