Увеличить высоту относительного , чтобы соответствовать абсолютной высоте дочерних элементов

ProgramBox

Увеличить высоту относительного , чтобы соответствовать абсолютной высоте дочерних элементов

Post author:admin
Запись опубликована:6 ноября, 2022
Post category:Вопросы по программированию

#html #css #height

#HTML #css #высота

Вопрос:

у меня есть div с относительной позицией, в этом div есть несколько дочерних элементов с абсолютной позицией. У каждого дочернего элемента несколько элементов и отображается столбец flex. Их размер может отличаться, поскольку содержимое не будет одинаковым для каждого дочернего элемента. Как мне увеличить высоту родительского div, чтобы точно соответствовать высоте всех дочерних элементов?

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

(поэтому в основном я хочу, чтобы div с классом team не имел высоты 0, но я не могу присвоить ему фиксированную высоту)

 .teamate {
  position: absolute;
  width: 40%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.teamate .sub-line {
  width: 25%;
}

.teamate img {
  width: 55%;
}

.teamate p {
  width: 50%;
}

.team {
  position: relative;
}

 <div class="team">

    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>


    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>


    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>

    <div class='teamate'>
        <img src="style/img/leftphoto.png" alt="">
        <h1>FIRST TEAMATE</h1>
        <h2>ROLE AND POSITION</h2>
        <img class="sub-line" src="style/img/subline.png">
        <p>
            Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
      Long description about teamate. Long description about teamate.
        </p>
    </div>
  
</div>

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

2. Неясно, какого эффекта вы пытаетесь достичь. У вас есть изображение предлагаемого результата?

3. Вот изображение результата, который я хочу сделать: ibb.co/Lg0xZtk

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

5. не используйте для этого относительное и абсолютное позиционирование, так как оно не будет отвечать на запросы и работать с ним будет сложно. Самый простой способ сделать это — использовать макет из 2 столбцов либо с помощью flexbox, либо с помощью grid . используйте nth-child псевдоселектор, чтобы сдвинуть правый столбец ниже. Мой ответ для решения css-grid показывает, как вы можете это сделать.

Ответ №1:

Вы можете сделать это, используя CSS-сетку с 2 столбцами. Это достигается с помощью .team { display: grid; grid-template-columns: repeat(2, 1fr); }

Затем вы добавляете верхнюю границу ко 2-му дочернему элементу, чтобы 2-й div (правая сторона) был перемещен немного ниже.

Из-за сетки 3-й элемент (2-й элемент левой стороны) также будет смещен ниже. чтобы противостоять этому и для любой другой следующей карты, вы добавляете отрицательный запас, равный 2-му дочернему запасу. для этого вы можете использовать: .team div:nth-child(2n 3) в качестве селектора.

 .teamate {
  width: 40%;
}

.teamate .sub-line {
  width: 25%;
}

.teamate img {
  width: 55%;
}

.teamate p {
  width: 50%;
}

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.team div:nth-child(2) {
  margin-top: 100px;
}

.team div:nth-child(2n   3) {
  margin-top: -100px;
}

 <div class="team">

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>


  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

  <div class='teamate'>
    <img src="style/img/leftphoto.png" alt="">
    <h1>FIRST TEAMATE</h1>
    <h2>ROLE AND POSITION</h2>
    <img class="sub-line" src="style/img/subline.png">
    <p>
      Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate. Long description about teamate.
    </p>
  </div>

</div>

1. Не могли бы вы сказать мне, что означает «n» в : .team div:n-й дочерний элемент (2n 3) ?

2. @Mathi n — это переменная с другим использованием, которая либо обозначает 0 , либо x-element . в этой комбинации 2n означает каждый 2-й элемент. 3n будет каждый 3-й элемент. 3 начиная с 3-го элемента. таким 2n 3 образом, целое является вычислительной переменной для 3, 5, 7, 9, 11, 13 ... — css-tricks.com/how-nth-child-works