Оправдать себя и относительную позицию не работает правильно

У меня есть grid-box и item2 находится в конце области привета b:

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    position: relative;
    right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class = "wrapper">
  <div class = "item1">Item 1</div>
  <div class = "item2">Item 2</div>
  <div class = "item3">Item 3</div>
</div>

Мне нужно немного сдвинуть item2 вправо от его позиции, поэтому я использую позицию relative и right: -20px. Он отлично работает в Chrome и Firefox, но в Safari версии 11.1.2 (13605.3.8) кажется, что justify-self: end не работает: я имею в виду, что item2 находится в левой части области. b. Без right: -20px элемент item2 находится в правой части его области. Как я могу это исправить?

Кодовое слово: https://codepen.io/mraimon/pen/ZwzxWe

css safari css-position css-grid

21.01.2019 13:30

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

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

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо этого вы можете использовать отрицательную маржу:

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    margin-right: -20px;
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class = "wrapper">
  <div class = "item1">Item 1</div>
  <div class = "item2">Item 2</div>
  <div class = "item3">Item 3</div>
</div>

Или перевести:

.wrapper > div {
    background-color: gray;
    padding: 20px;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 10px;
    grid-template-rows: 150px 150px;
    grid-template-areas: 
      "a b"
      "c d"
}
.item1 {
    grid-area: a;
}
.item2 {
    grid-area: b;
    justify-self: end;
    transform:translateX(20px);
}
.item3 {
    grid-area: d;
    justify-self: start;
}

<div class = "wrapper">
  <div class = "item1">Item 1</div>
  <div class = "item2">Item 2</div>
  <div class = "item3">Item 3</div>
</div>

21.01.2019 13:38

Другие вопросы по теме

Загрузка base64 pdf в Safari

Мобильное меню веб-сайта не работает в браузере Safari

Невозможно контролировать громкость звука в Safari при использовании createMediaElementSource()

Stroke-dasharray и stroke-dashoffset странно ведут себя на круге в Safari

Разрешение DNS в Chrome/Firefox занимает на целую секунду больше времени, чем в Safari

Медленная производительность Safari при воспроизведении звука поверх себя несколько раз за короткое время

Браузеры постоянно вставляют '#10;' в строке base64 на каждой новой строке?

Почему select () не работает в Safari с ReactJS?

Как получить настройки Safari в Javascript

AJAX withCredentials не передает файлы cookie в Safari

Оправдать себя и относительную позицию не работает правильно

Ответы 1

Другие вопросы по теме

Похожие вопросы