html - 矩形内圆响应内容

Question

我正在尝试在左侧的圆圈内制作矩形，当我调整网站屏幕的大小时，形状移出并且文本从形状中检出，任何使文本和形状响应所有屏幕
的方法代码：https ://codepen.io/enespro/pen/rNWmLvP

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="circle">
          <h3 class="mt-4">Bzns Monster School<br><span style="font-size: 20px; color: #DDDD;">From Zero To Hero</span></h3>
        </div>
        <div class='rect-box'>
      </div>
      <div class='rect-content'>
        <div class="content">
          <span>Lorem ipsum dolor sit amet, consetetur<br> sadipscing elitr, sed diam nonumy eirmod<br> tempor invidunt ut labore et dolore magna.</span>
        </div>
      </div>
      <button class="btn btn-outline-secondary ml-1">Read More</button>
      </div>

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

我在您的代码中看到有很多绝对位置，从长远来看只会让您发疯以维护该代码。那么使用 flex 的魔力呢？:) 我在下面重写了您的代码。单击“运行代码片段”检查它以查看它的运行情况。

我建议在移动设备上将横幅与圆圈分开，使其具有响应性和可读性。享受！

.wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  flex-direction: column;
}

.circle {
  border-radius: 50%;
  background-color: #000;
  min-width: 200px;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle span {
  color: #fff;
}

.rectangle {
  width: 100%;
  padding: 10px;
  text-align: center;
  background-color: #eee;
}


@media screen and (min-width: 600px) {
  .circle {
    position: absolute;
  }
  
  .rectangle {  
    padding: 30px 0 30px 220px;
  }

  .wrapper {
    flex-direction: row;
  }
}

<div class='wrapper'>
  <div class='circle'><span>Lorem Ipsum</span></div>
  <div class='rectangle'>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</div>
</div>