Центрирование DIV по горизонтали и вертикали на фоне - PullRequest
0 голосов
/ 31 марта 2019

Поэтому я пытаюсь закодировать следующий макет, используя css и bootstrap 4:

enter image description here

В основном DIV1 и DIV2 являются частью фона идолжен всегда оставаться там, где они есть, то есть DIV1 всегда правый верхний угол, DIV2 правый нижний угол.

Я добился этого с помощью:

#DIV1 {
    position: relative;
}
#DIV1 img {
    position: absolute;
    top: 50px;
    right: 25px;
    width: 20%;
    height: auto;
}

#DIV2 {
    position: relative;
}

#DIV2 img {
    position: fixed;
    bottom:-150px;
    right:-50px;
    width: 40%;
    height: auto;
}

Но я не могу понять, как получитьDIV3, который не является частью фона и должен охватывать DIV1 и DIV2 при необходимости.DIV3 должен быть центрирован по вертикали и горизонтали и должен быть адаптивным, т.е. должен уменьшаться на меньших экранах.Я не уверен, как этого добиться, это будет вариант использования сетки начальной загрузки?Должен ли я поместить DIV1 DIV2 и DIV3 в сетку?

Ответы [ 2 ]

1 голос
/ 31 марта 2019

Это решение для вас?

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
}

#DIV1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40%;
}

#DIV2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 120px;
    height: 40%;
}

#DIV3 {
  position: absolute;
  left: 0;
  right: 140px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 35%;
  height: 50%;
}
<div id="DIV1">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV2">
    <img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV3">
    <img src="https://picsum.photos/300/300/?random">
</div>
0 голосов
/ 31 марта 2019

использование

position: absolute;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);
...