Прикрепите div к границе другого div, чтобы они оставались вместе во время изменения размера - PullRequest
Новая
       17

Прикрепите div к границе другого div, чтобы они оставались вместе во время изменения размера

0 голосов
/ 27 апреля 2020

Как я могу прикрепить квадрат в середине границы другого div? Я пробовал следующий подход: 

.cont {
  position: relative;
  background-color: blue;
}

.square {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 0%;
  background-color: yellow;
  left: -5%;
  top: 25%;
}

.logoOnTheRight {
  max-height: 100px;
  max-width: 100px;
}

.logoOnTheRight img {
  width: 100%;
}

body {
  padding: 50px;
}
<div class="cont d-flex flex-row-reverse">
  <div class="square"></div>
  <div class="logoOnTheRight p-2">
    <img src="https://i.imgur.com/sPuqd31g.jpg" />
  </div>
</div>

В полноэкранном режиме Square «сидит» на границе, как и положено. Но когда я изменяю размер страницы, квадрат меняет положение так, что он не остается на границе. Я заметил, что если я укажу width в контейнере cont на px, то это сработает. Но я хочу, чтобы ширина cont была 100%. Как заставить Квадрат оставаться на границе cont при изменении размера страницы?

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Если вы используете position: absolute, вы позиционируете элемент абсолютно без какого-либо отношения к другим элементам.

Если вы хотите расположить элемент относительно другого элемента, не используйте position: absolute. Вы можете выровнять два элемента влево / вправо с помощью flexbox, как показано в ответе ниже. Если вы хотите различное выравнивание элементов, вам нужно изменить CSS, чтобы получить желаемый результат. Просто не используйте position: absolute, если вы хотите, чтобы он реагировал.

Есть сценарий ios, когда вам нужно position: absolute, но это не один.

В моем примере я использовал display: flex в сочетании с align-items: center;, чтобы выровнять элементы в центре поля. Проверьте эту ссылку для получения дополнительной информации о flexbox.

Чтобы переместить окно влево, вы можете использовать transform: translateX(-50%);

.cont {
  position: relative;
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.square {
  height: 50px;
  width: 50px;
  border-radius: 0%;
  transform: translateX(-50%);
  background-color: yellow;
}

.logoOnTheRight {
  max-height: 100px;
  max-width: 100px;
}

.logoOnTheRight img {
  width: 100%;
}

body {
  padding: 50px;
}
<div class="cont d-flex flex-row-reverse">
  <div class="square"></div>
  <div class="logoOnTheRight p-2">
    <img src="https://i.imgur.com/sPuqd31g.jpg" />
  </div>
</div>
0 голосов
/ 28 апреля 2020

Вы можете попробовать это 

.square {
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 0%;
    background-color: yellow;
    left: -25px;
    top: 25%;
}

Вместо использования % для left вы можете использовать px

...