1

Проблема такая: две background-картинки располагаются не на одной строчке. Как это исправить?

#img {
  background-position: left;
  vertical-align: middle;
  display: inline-block;
  padding: 0px;
  width: 348px;
  height: 286px;
  margin: 0px;
  background: url(el1.png) no-repeat;
}

#img1 {
  background-position: right;
  vertical-align: middle;
  display: inline-block;
  padding: 0px;
  width: 348px;
  height: 286px;
  margin: 0px;
  background: url(el2.png) no-repeat;
}
<div id="img"></div>
<div id="img1"></div>

Нужно чтоб первая осталась на месте, в левой части экрана, а вторая была в правой части экрана.

5
  • у вас 2 раза свойство display описывается, так должно быть?
    – Spectre
    30 апр 2012 в 16:54
  • я убрал и ничего не изменилось, значит это что то другое...
    – Kamilplus
    30 апр 2012 в 17:52
  • background-position вам в помощь
    – Spectre
    30 апр 2012 в 19:11
  • почему то без изменений(( можете проверить? я не знаю что уже убрать и что изменить
    – Kamilplus
    30 апр 2012 в 20:11
  • Так решается же это с помощью float!) 9 окт 2015 в 2:09

2 ответа 2

1

Попробуйте вместо background использовать обычные картинки, применив к ним разный z-index.

0

Разгрузим CSS.

.flex {
  justify-content: space-between;
  display: -webkit-flex;
  width: 100%;
  position: relative;
}

#img,
#img1 {
  display: inline-block;
}
<div class="flex">
  <div id="img"></div>
  <div id="img1"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.