Как разместить два изображения рядом друг с другом с positon absolute

Question

Как можно разместить две картинки рядом, обязательно с position absolute?

.rectangle {
   background: url(https://i.stack.imgur.com/hZE2q.png) no-repeat;
   width: 100%;
   max-width: 559px;
   height: 660px;
   position: absolute;
   z-index: 15;
}
.rhombus {
  background: url(https://i.stack.imgur.com/EJ3vk.png) no-repeat;
    width: 100%;
    height: 660px;
    max-width: 472px;
    position: absolute;
    z-index: 15;
}

<body style="background-color:#FF0000;">
    <div class="logo-block">
        <div class="rectangle"></div>
        <div class="rhombus"></div>
    </div>
</body>

css3 html5

Dean Grey · Accepted Answer

Поставить для второй картинки свойство left:559px;, если известна ширина первой картинки.Если ширина не известна, то можно через js ее получать, и устанавливать left второй картинке.

Correct answer by Dean Grey on October 4, 2020

Devergence · Answer

.logo-block { position: relative; } .rectangle { background: url(https://i.stack.imgur.com/hZE2q.png) no-repeat; width: 100%; max-width: 559px; height: 660px; position: absolute; top: 0; z-index: 15; } .rhombus { background: url(https://i.stack.imgur.com/EJ3vk.png) no-repeat; width: 100%; height: 660px; max-width: 472px; position: absolute; z-index: 15; top: 0; left: 559px; }

Как разместить два изображения рядом друг с другом с positon absolute

2 Answers

Add your own answers!

Ask a Question