Высота контейнера, равная перекрывающимся дочерним элементам с динамическими высотами c - PullRequest
Новая
       4

Высота контейнера, равная перекрывающимся дочерним элементам с динамическими высотами c

0 голосов
/ 05 февраля 2020

Представьте, что вы контейнер с фиксированной шириной height: auto и двумя элементами внутри себя. Каждый элемент имеет свою высоту, основанную на количестве элементов внутри него. Теперь вы хотите, чтобы ваши дети находились сверху, перекрывая друг друга. Но в то же время вы хотите, чтобы ваш рост был равен росту ребенка с большинством предметов.

Как вы думаете, вы можете справиться с этим самостоятельно, не спрашивая, что странно JS волшебно - парень, который присматривает за тобой и твоими детьми?

Кроме того, твоим детям, похоже, нравится динамически изменять количество предметов внутри них, поэтому, к сожалению, ты не можешь использовать фиксированные высоты здесь.

Желаемый результат:

desired result

(каждый элемент немного переводится влево для лучшего просмотра)

Да, немного кода! 

<div class="container">

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

</div>

.container {
  width: 300px;
}

.menu {
}

.item {
  height: 30px;
}

?‍? JSFiddle с примером

1 Ответ

0 голосов
/ 05 февраля 2020

Да, вы можете сделать это! Если вы CSS сетка .

Согласно спецификации, если вы поместите два элемента в одну ячейку. они будут перекрывать друг друга, и с помощью align-items: start; вы можете выровнять элементы по их вершинам. 

<div class="container">

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

  <div class="child">
    <div class="item"></div>
    <!-- ... -->
  </div>

</div>

/** Creating a CSS grid with a single cell */
.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'cell';
  align-items: start;
}

/** Putting both children in the first cell */
.child {
  grid-area: cell;
}

.item {
  height: 30px;
}

А вот обновленный JSFiddle для демонстрации решения.

* Сетка 1013 *CSS имеет довольно хорошее покрытие браузера. Убедитесь, что вы используете автоматический префикс для IE.

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

...