内容完美圈内的Div

Question

我正在尝试复制 继样机 只是练习在圆圈内放置一个正方形，但是这个距离我尽可能的近， 我尝试使用JS，但是看起来有些怪异。 这是我的代码

Index.html

    .action-selection {
      display: flex;
      justify-content: space-between;
    }

    .action {
      height: auto;
      flex: 0 1 30%;
      border-radius: 100%;
      border: 2px solid orange;
      text-align:center;  
    }

    .action img {
      width: 30px;
    }

    .action div {
      border: 2px dashed black;
      height : auto;
    }

 <div class="action-selection">
        <div class="action">
          <div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
          </div>
        </div>
        <div class="action">
          <div>
            <img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
          </div>
        </div>
        <div class="action">
          <div>
            <img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
          </div>
        </div>
      </div>

Answer 1

这里有很多小元素。首先，当您要处理的行为很多时，不要害怕使用多个包装div，而不要尝试对太多的元素承担太多的责任。

• 您已经使用flex-basis设置了宽度。
• 要使圆具有固定的1：1宽高比，可以使用50％边框，0高度和顶部100％填充边。最后一点很棘手，但是用百分比填充顶部或底部是宽度的百分比。
• 要使正方形居中，请使用另一个具有绝对位置的div，顶部为50％，左边为50％，然后翻译：transform（-50％，-50％）。转换值是元素本身的百分比，顶部和左侧的位置百分比是父元素的百分比。
• 要在正方形上添加填充而不影响其大小，请使用box-sizing：border-box
• 最后，我使用宽度和高度的72％来使正方形与圆接触。这非常接近（2的平方根）/ 2 * 100％，为70.7％，但它对我来说适合您的边框厚度。

.action-selection {
  display: flex;
  justify-content: space-between;
}

.action {
  flex: 0 1 30%;
  text-align: center;
}

.action img {
  width: 30px;
}

.action__container-circle {
  border-radius: 50%;
  border: 2px solid orange;
  height: 0;
  padding-top: 100%;
  position: relative;
}

.action__content-square {
  border: 2px dashed black;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate( -50%, -50%);
  width: 72%;
  height: 72%;
  box-sizing: border-box;
  padding: 5px;
  overflow: hidden;
}

<div class="action-selection">
  <div class="action">
    <div class="action__container-circle">
      <div class="action__content-square">
        <img src="img/phone.png">
        <p>I'm already lincenced and I want to join BeUrban</p>
      </div>
    </div>
  </div>
  <div class="action">
    <div class="action__container-circle">
      <div class="action__content-square">
        <img src="img/phone.png">
        <p>I'm licensed but I'd like to know more about BeUrban</p>
      </div>
    </div>
  </div>
  <div class="action">
    <div class="action__container-circle">
      <div class="action__content-square">
        <img src="img/phone.png">
        <p>I'm ready to start my career with BeUrban</p>
      </div>
    </div>
  </div>
</div>

Answer 2

.action-selection {
  display: flex;
  justify-content: space-between;
}

.action {
  border-radius: 50%;
  border: 2px solid orange;
  text-align: center;
  height: 200px;
  width: 200px;
}

.action img {
  width: 30px;
}

.action div {
  border: 2px dashed black;
  /* height: auto; */
  width: 75%;
  margin-left: 50%;
  margin-top: 50%;
  transform: translate(-50%, -50%);
  height: 65%;
}


}

<div class="action-selection">
  <div class="action">
    <div><img src="img/phone.png">
      <p>I'm already lincenced and I want to join BeUrban</p>
    </div>
  </div>
  <div class="action">
    <div>
      <img src="img/phone.png">
      <p>I'm licensed but I'd like to know more about BeUrban</p>
    </div>
  </div>
  <div class="action">
    <div>
      <img src="img/phone.png">
      <p>I'm ready to start my career with BeUrban</p>
    </div>
  </div>
</div>

Answer 3

创建依赖于视口宽度的完美圆的技巧是使用width和padding-top使用相同的值。填充百分比基于宽度，而如果您使用高度百分比，则将基于父对象的高度。

在这种情况下，如果您基本上是在使用width: 30%，那么您将使用padding-top: 30%，然后将内容设置为position: absolute，然后将其居中在相对定位的圆内。您可能需要摆弄想要的确切宽度/高度组合，但这将为您提供要寻找的完美圆。

注意，尽管CSS不能唯一地计算出内部正方形/矩形与外部圆形相交的确切点。与CSS calc相比，这将需要更复杂的数学运算，因为您必须根据矩形内内容的高度确定该值，然后从矩形内调整宽度。

.action-selection {
  display: flex;
  justify-content: space-between;
}

.action {
  height: auto;
  flex: 0 1 30%;
  position: relative;
  padding-top: 30%;
  border-radius: 100%;
  border: 2px solid orange;
  text-align:center;  
  display: flex;
}

.action img {
  width: 30px;
}

.action div {
  border: 2px dashed black;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

<div class="action-selection">
    <div class="action">
      <div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
      </div>
    </div>
    <div class="action">
      <div>
        <img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
      </div>
    </div>
    <div class="action">
      <div>
        <img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
      </div>
    </div>
  </div>

Answer 4

嘿，请检查此内容，然后在您的页面中添加代码，然后它将按照您的要求显示。

.action-selection {
    display: flex;
    justify-content: space-between;
}
.action {
    border: 2px solid orange;
    text-align: center;
    width: 250px;
    height: 250px;
    position: relative;
    border-radius:100%;
}
.action div {
    border: 2px dashed black;
    height: 125px;
    position: absolute;
    left: 0;
    top: 52px;
    padding-top: 15px;
    width: 200px;
    right: 0;
    margin: auto;
}
.action img {
    width: 30px;
}

<div class="action-selection">
    <div class="action">
      <div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
      </div>
    </div>
    <div class="action">
      <div>
        <img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
      </div>
    </div>
    <div class="action">
      <div>
        <img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
      </div>
    </div>
  </div>