0

Доброй ночи. Как можно переверстать без использования position: absolute;, чтобы блок не сбивался?

Нужно, чтобы иван иванов остался на месте, а не уезжал вверх.

Блок .footer__author

https://codepen.io/camobap6/pen/gOayzLZ

.footer {
  font-size: 24px;
  background-color: #1F1F1F;
  display: flex;
  box-sizing: border-box;
  padding: 60px 0 30px;
}

.footer__columns {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}

.footer__column {
  min-height: 250px;
}

.footer__column_content_copyright {
  flex-basis: 711px;
  position: relative;
}

.logo-footer {
  width: 183px;
  height: 35px;
  background-image: url(../images/logo_place_footer.svg);
  background-size: cover;
  background-position: center;
}

.footer__author {
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 24px;
  font-size: 18px;
  color: #4F4F4F;
}

.footer__column-heading {
  line-height: 30px;
  font-size: 18px;
  color: #FFFFFF;
  margin: 0 0 20px 0;
}

.footer__column-links {
  padding: 0;
  cursor: pointer;
}

.footer__list-item {
  display: block;
}

.footer__link {
  text-decoration: none;
  line-height: 30px;
  font-size: 18px;
  color: white;
  transition: opacity .2s linear;
  cursor: pointer;
}

.footer__link:hover {
  opacity: .6;
}

.footer__social-icon {
  margin-right: 16px;
}

.footer__column_content_info {
  margin-right: 24px;
}

.footer__columns_info {
  display: flex;
}

div {
  border: 1px solid red;
}
<footer class="footer">
  <div class="footer__columns">
    <div class="footer__column footer__column_content_copyright">
      <div class="logo-footer"></div>
      <p class="footer__author">© 2019. Иван иванов</p>
    </div>
    <nav class="footer__column footer__column_content_info">

      <h3 class="footer__column-heading">О Практикуме</h3>
      <ul class="footer__column-links">
        <li class="footer__list-item"><a href="https://praktikum.yandex.ru" target="_blank" class="footer__link">Главная</a></li>
        <li class="footer__list-item"><a href="https://praktikum.yandex.ru" target="_blank" class="footer__link">Концпация </a></li>
        <li class="footer__list-item"><a href="https://praktikum.yandex.ru" target="_blank" class="footer__link">Наставники</a></li>
      </ul>
    </nav>
    <div class="footer__column footer__column_content_social">
      <h3 class="footer__column-heading">Соцсети</h3>
      <ul class="footer__column-links">
        <li class="footer__list-item">
          <a href="https://www.facebook.com/yandex.praktikum" target="_blank" class="footer__link"><img src="images/facebook_color_white.svg" alt="Facebook" class="footer__social-icon">Facebook</a>
        </li>
        <li class="footer__list-item">
          <a href="https://vk.com/yandex.praktikum" target="_blank" class="footer__link"><img src="images/vk_color_white.svg" alt="ВКонтакте" class="footer__social-icon">ВКонтакте</a>
        </li>
        <li class="footer__list-item">
          <a href="https://www.instagram.com/yandex/?hl=ru" target="_blank" class="footer__link"><img src="images/instagram_color_white.svg" alt="Instagram" class="footer__social-icon">Instagram</a>
        </li>
      </ul>
    </div>
  </div>
</footer>

2
  • 1
    .footer__column_content_copyright => display: flex; flex-direction: column: justify-content: space-between вот так 26 мая 2020 в 0:47
  • Ничего не понял что случилось , но заработало )) Спасибо
    – user389240
    26 мая 2020 в 0:54

2 ответа 2

0

Или так transform: translateY(160px);

3
  • А если высота изменится ? 27 мая 2020 в 11:46
  • Тогда можно высоту родителя вычислять js-ом и в translateY подставлять нужное значение за вычетом высоты смещаемого элемента.
    – SM0KER
    27 мая 2020 в 11:56
  • Глупости , для такой мелочи использовать javascript 27 мая 2020 в 11:57
0
.footer__columns{
  width: 90%;
  margin-top: 60px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
}

.footer__column_copyright{
  flex-basis: 711px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo__place_footer{
  background-image: url(../images/logo_place_footer.svg);
}

.footer__author{
  margin-top: 18px;
  margin-bottom: 18px;
  line-height: 25px;
  font-size: 18px;
  font-weight: normal;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.