Абсолютное / относительное позиционирование нарушает выравнивание соседнего элемента - PullRequest
Новая
       8

Абсолютное / относительное позиционирование нарушает выравнивание соседнего элемента

0 голосов
/ 02 июля 2018

Я использую абсолютное и относительное позиционирование для горизонтального и вертикального центрирования div в контейнере div. Рядом с этим контейнером находится еще один элемент div, который должен аккуратно помещаться рядом с контейнером внутри элемента верхнего уровня контейнера. Но вместо этого он движется вниз, почти полностью за пределы границы div верхнего уровня. Исходный код: 

#top-level {
  background: #90c0ff;
  height: 400px;
  width: 600px;
}

#container {
  background: #bbffbb;
  height: 400px;
  width: 400px;
  display: inline-block;
  position: relative;
  text-align: center;
}

#inner {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
}

#adjacent {
  background: #ff5050;
  height: 395px;
  width: 195px;
  display: inline-block;
}
<div id="top-level">
  <div id="container">
    <div id="inner">
      Internal Text
    </div>
  </div>
  <div id="adjacent">
    Sample text
  </div>
</div>

Пример скрипта здесь

Есть идеи, почему соседний div не выравнивается должным образом?

1 Ответ

0 голосов
/ 02 июля 2018

Вы можете использовать flex на родительском элементе вместо inline-block на дочерних элементах, это решило бы проблему сдвига второго блока, если не хватает места: 

#top-level {
  background: #90c0ff;
  height: 400px;
  width: 600px;
}

#container {
  background: #bbffbb;
  height: 400px;
  width: 400px;
  position: relative;
  text-align: center;
  display: inline-block;
  vertical-align:top;
}

#inner {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
}

#adjacent {
  background: #ff5050;
  height: 395px;
  width: 195px;
  display: inline-block;
  vertical-align:top;
}
<div id="top-level">
  <div id="container">
    <div id="inner">
      Internal Text
    </div>
  </div>
  <div id="adjacent">
    Sample text
  </div>
</div>

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

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

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

#top-level {
  background: #90c0ff;
  height: 400px;
  width: 600px;
  /* add te following */
  display: flex;
  justify-content: space-between;
}

#container {
  background: #bbffbb;
  height: 400px;
  width: 400px;
  position: relative;
  text-align: center;
}

#inner {
  height: 200px;
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
}

#adjacent {
  background: #ff5050;
  height: 395px;
  width: 195px;
}
<div id="top-level">
  <div id="container">
    <div id="inner">
      Internal Text
    </div>
  </div>
  <div id="adjacent">
    Sample text
  </div>
</div>
...