如何以螺旋形状正确定位图像

debugcn 发表于 Dev

斯奈克

但是我尝试使用 bootstrap 4 对列进行处理。起初渲染效果很好，但由于所有元素都在容器流体中，当我稍微调整窗口大小时，会破坏我的布局。

这是我的代码：

.secondary-title {
  color: #CABB9D;
  font-size: 1.4em;
  line-height: 1.9em;
  & span {
    color: #18161A;
    font-family: 'PTSans';
    font-weight: bold;
    font-size: 2.2em;
  }
}

.two-points {
  border-top: 10px dotted #C1B89C;
  width: 40px;
  margin-left: 0;
  margin-top: 0;
}

.cf-square-pic {
  & .bloc-title {
    width: 445px;
    margin: 50px 0 110px 20px;
  }
  & .photo-4 {
    margin-top: 50px;
  }
}

<div class="container-fluid cf-square-pic px-0">
  <div class="row no-gutters">
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
    </div>
    <div class="col-lg-5">
      <div class="bloc-title px-3">
        <h2 class="secondary-title mb-1">
          <span>LOREM IPSUM DOLOR</span>
        </h2>
        <hr class="two-points" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
        </p>
      </div>
      <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
    </div>
    <div class="col-lg-5">
      <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
    </div>
    <div class="col-lg-7">
      <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
    </div>
  </div>
</div>

有没有人知道如何将左下角的最后一张图像固定在左上角的底部，而不会在调整大小时丢失外观？

在此先感谢您的帮助！

斯奈克

我找到了怎么做！所以这是对我有用的代码：

    <div class="container-fluid cf-square-pic px-0">
        <div class="row no-gutters row-flex">
              <img src="/assets/img/photo/photo-1.jpg" alt="" class="d-block w-100 photo-1">
              <img src="/assets/img/photo/photo-2.jpg" alt="" class="d-block w-100 photo-2">
              <div class="bloc-title px-3">
                  <h2 class="secondary-title mb-1">
                      <span>LOREM IPSUM DOLOR</span>
                  </h2>
                  <hr class="two-points"/>
                  <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec purus urna. Pellentesque varius facilisis tellus nec ullamcorper. Ut sit amet vulputate mauris.
                  </p>
              </div>
              <img src="/assets/img/photo/photo-4.jpg" alt="" class="d-block w-100 photo-4">
              <img src="/assets/img/photo/photo-3.jpg" alt="" class="d-block w-100 photo-3">
        </div>
    </div>

.cf-square-pic {
    & .bloc-title {
        width: 445px;
        margin: 50px 0 80px 20px;
    }
    & .row-flex {
        display: flex;
        flex-flow: column wrap;
        width: 100%;
        max-height: 95vw;
        & .photo-1 { width: 54%; }
        & .photo-2 {
            width: 35%;
            border-top: 4px solid #fff;
            border-right: 4px solid #fff;
        }
        & .photo-3 {
            width: 65%;
            margin-left: -19%;
        }
        & .photo-4 {
            width: 46%;
            border-bottom: 4px solid #fff;
            border-left: 4px solid #fff;
        }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。