Блог

Главная - Вопросы по программированию - Справка по CSS. Откройте расширяющийся div, не перемещая содержимое ниже вниз

Справка по CSS. Откройте расширяющийся div, не перемещая содержимое ниже вниз

#html #css #web

#HTML #css #веб

Вопрос:

введите описание изображения здесь

Судя по изображению, рисунок 1 является закрытым состоянием. Как только пользователь расширяет зеленый div на второй панели, содержимое ниже (синее) также перемещается вниз. Есть ли способ, используя только CSS, я могу открыть зеленый div, не перемещая синее содержимое вниз?

Я использую сторонний компонент, поэтому у меня нет возможности изменять HTML, поэтому я могу использовать только CSS.

В настоящее время 3 divs заключены в другой div с display: flex; flex-wrap: wrap помощью . Любые предложения будут с благодарностью

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

1. Не могли бы вы предоставить некоторый HTML-код, чтобы мы знали, как мы можем использовать CSS? Если элементы являются оболочками для элемента содержимого, то вы можете просто использовать position: absolute для содержимого, чтобы оно не взаимодействовало с потоком при расширении. В противном случае я бы предложил использовать CSS Grid .

Ответ №1:

Вам следует заглянуть в CSS grid, это, безусловно, лучший способ для начинающих научиться определять размеры divs с помощью столбцов и строк. Вам нужно будет установить ширину и высоту любого div, чтобы он не изменял размер, иначе содержимое будет просто перемещаться в зависимости от того, что находится внутри них, что является другой проблемой.

Ответ №2:

css-сетка должна сделать свое дело

 .grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}