Question

如何调整代码，以使圆在所有响应的断点处以文本块为中心。文本块也需要具有相同的宽度并具有居中对齐的列。文本列之间的垂直间距也需要相等。

我也将图片贴在这里，我想要那样制作。

Answer 1

尝试这个简单的过程...您需要设置宽度，高度，边界半径属性以实现适当的圆。

<div style="width:100px; height:100px;border: 1px solid;border-radius: 50%; background-color: #ddd;"></div>

Answer 2

Flexbox非常适合这种布局。

Flexible Box Module，通常称为flexbox，是为设计   作为一维布局模型，以及可以提供   界面中项目之间的空间分布，功能强大   对齐功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

ul {
  display: flex;
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  flex: 1;
  max-width: 150px;
  text-align: center;
  display: inline-block;
}

.circle {
  border: 1px solid orange;
  border-radius: 50%;
  height: 120px;
  width: 120px;
  line-height: 120px;
  margin: 12px auto;
}

.circle-txt {
  text-align: center;
}

<ul>
  <li>
    <h3 class="circle">Circle 1</h3>
    <div class="circle-txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Morbi scelerisque est non ipsum eleifend eleifend. 
      Duis eu sapien ac magna aliquet lacinia non ut est. 
      Quisque velit ligula, molestie vel consectetur sit amet, 
      sodales rutrum neque. 
    </div>
  </li>
  <li>
    <h3 class="circle">Circle 2</h3>
    <div class="circle-txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Morbi scelerisque est non ipsum eleifend eleifend. 
      Duis eu sapien ac magna aliquet lacinia non ut est. 
      Quisque velit ligula, molestie vel consectetur sit amet, 
      sodales rutrum neque. 
    </div>
  </li>
  <li>
    <h3 class="circle">Circle 3</h3>
    <div class="circle-txt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      Morbi scelerisque est non ipsum eleifend eleifend. 
      Duis eu sapien ac magna aliquet lacinia non ut est. 
      Quisque velit ligula, molestie vel consectetur sit amet, 
      sodales rutrum neque. 
    </div>
  </li>
</ul>

如何更改代码，使图片中的HTML和CSS具有平衡的圆位置？

2 个答案: