时间戳

首页 > 解决方案 > 制作一个包含内容的响应圈

html - 制作一个包含内容的响应圈

问题描述

我正在为我的摄影服务设计一个网站，我希望将价格显示在可以在移动设备上响应的圆圈中。

这是它在桌面上的外观：

桌面视图

不幸的是，它在移动设备上看起来像这样：

移动视图

这是我为每个圈子使用的代码：

.pricessquarered {
  display:flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
  <p>
    45€  
  </p>
    <hr>
  <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

我将如何让圆圈像在桌面上一样好地计算文本？

标签： htmlcssmobileflexboxresponsive

解决方案

您可以应用flexwhich divis inside .pricessquarered，flex-direction: column以及一些附加设置（见下文）。您还需要删除其所有子元素的顶部和底部边距以将它们放入容器中：

.pricessquarered {
  display: flex;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 16px #d17461;
  padding: 30px;
  width: 10vw;
  height: 10vw;
  color: #d17461;
  font-size: 22px;
  padding-top: 30px;
  border-radius: 100%;
}

.pricessquarered>div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 30px;
  padding-bottom: 30px;
}

.pricessquarered>div * {
  margin: 0;
}
<div class="pricessquarered">
  <div>
    <h3><span style="color:#d17461">1 image</span></h3>
    <p>
      45€
    </p>
    <hr>
    <p><span style="font-size:14px; color:black">
   USD $50
  </span></p>
  </div>
</div>

附加说明：flex您的设置.pricessquarered仅影响作为div的直接子级的.pricessquarered，而不影响其中的所有其他元素。它基本上只在其父元素内居中（可能是body，但我无法从您的代码中看到）。所有其他元素的放置（文本居中除外）需要我在上面发布的其他设置。

推荐阅读