1

Возникло затруднение, как правильней расположить левую часть, где расположены 2 изображения, так чтобы выглядело прилично на всех разрешениях.

введите сюда описание изображения

.image-container {
  height: 290px;
  width: 290px;
  position: relative;
  background-position: center center;
  background-size: cover;
  box-shadow: 0px 10px 142.5px 0px rgba(60, 103, 176, 0.40);
}

.image-right{
  top: 80px;
  margin-left: -100px;
  margin-bottom: 130px;
}

.left-block {
  width: 100%;
  height: auto;
  background-position: left, right !important;
  .docs-block {
    margin-top: 256px;
  }
}
<div class="section-03">
    <div class="container-fluid">
        <div class="row">
            <div class="left-block col-xl-6 section-overlay">
                <div class="docs-block">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="image-container image-left"
                                 style="background-image: url('assets/img/Слой 6.png')">
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="image-container image-right"
                                 style="background-image: url('assets/img/Слой 7.png')">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="right-block col-xl-6">
                <div class="education-info"></div>
                <div class="blue-block"></div>
            </div>
        </div>
    </div>
</div>

Думал, может лучше использовать position:absolute для их расположения, но пока не придумал как это сделать.

Надеюсь на помощь) От вас.

1
  • А картинки должны менять размер, или ширина и высота фиксированная?
    – Air
    1 дек 2017 в 9:57

2 ответа 2

0

Например вот так

.one,.two{
  width: 200px;
  height: 200px;
  display: inline-block;
  background: silver;
  vertical-align: top;
}

.two{
  margin-top: 50px;
  margin-left: 50px;
}
<div class="one"></div> 
<div class="two"></div> 

0

У блока, оборачивающего картинку нужно проставить vertical-align в css, для меня это новость буквально вчерашнего дня, но картинки чувствительны к этому параметру. Просто проставь внешнему блоку этот параметр, и все само собой решится

Ваш ответ

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

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