如何将 div 放置在一个角度上并将高度与内容匹配

Question

我正在尝试将此设计添加到我的网页，但我无法将右侧 div 的高度与左侧 div 的高度相匹配，如第二张图片所示 有人可以帮我吗？

同样在移动视图中，正方形显示为每行一个正方形，但我每行需要 2 个正方形。

这是我的代码：

  <div class="container-fluid caffstudio">
    <div class="row">
      <div class="col-md-6 caffLeft">
        <div class="row">
          <!-- caff logo -->
          <div class="col-md-4">
            <div class="cfimgdiv" style="display: inline-block">
              <img src="caffeine logomark.svg" class="imgcaff" />
            </div>
          </div>

          <!-- caff text -->
          <div class="col-md-8" style="display: inline-block">
            <div class="cafftext">Caffine UX Design Studio</div>
            <div class="cafftext1">
              Lorem ipsum dolor sit amet consectetur. Quisque velit cursus nulla aenean aliquam auctor orci.
            </div>
            <br />
            <a href="#" class="linkcaff mt-10">Visit Website</a>
          </div>

          <!-- first line of cards -->
          <div class="container-fluid">
            <div class="img4">
              <div class="row">
                <div class="col-md-6 col-sm-12 im4div">
                  <div class="im4" style="display: inline-block">
                    <img src="experience.svg" />
                  </div>
                  <div class="im4txt" style="display: inline-block">
                    <div>5 yrs</div>
                    <div>Experience</div>
                  </div>
                </div>
                <div class="col-md-6 col-sm-12 im4div">
                  <div class="im4" style="display: inline-block">
                    <img src="projects.svg" />
                  </div>
                  <div class="im4txt" style="display: inline-block">
                    <div>25+</div>
                    <div>Projects completed</div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-12 im4div">
                  <div class="im4" style="display: inline-block">
                    <img src="pipeline.svg" />
                  </div>
                  <div class="im4txt" style="display: inline-block">
                    <div>10+</div>
                    <div>Project in pipeline</div>
                  </div>
                </div>
                <div class="col-md-6 col-sm-12 im4div">
                  <div class="im4" style="display: inline-block">
                    <img src="screensdelivered.svg" />
                  </div>
                  <div class="im4txt" style="display: inline-block">
                    <div>1597</div>
                    <div>Screens delivered</div>
                  </div>
                </div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div class="col-md-6 col-sm-12" style="z-index: 1;">
          <div class="multipleRect">
            <div class="twoRect">
              <div class="greyRect"></div>
              <div class="greyRect"></div>
            </div>
            <div class="twoRect">
              <div class="greyRect"></div>
              <div class="greyRect"></div>
            </div>
            <div class="twoRect">
              <div class="greyRect"></div>
              <div class="greyRect"></div>
            </div>
          </div>
      </div>
    </div>
  </div>
  </div>

CSS

.caffstudio{
  margin: 0 auto;
  background-color: #211E1E;
  position: relative;
  padding-left: 30px;
  overflow: hidden;
}

.greyRect{
  width: 200px;
  height: 200px;
  background: #D9D9D9;
  border-radius: 18.6457px;
  display: inline-block;
  margin: 5px;
}

.multipleRect{
  transform: rotate(12deg);
  max-height: 80%;
}

我的代码输出： [1]:

预期的代码输出： [2]:

Answer 1

我建议您在移动设备上查看 flexbox 和媒体查询，以获取您想要的盒子。

例子：

@media (max-width: 767px) {
  .twoRect {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}