我不知道如何做CSS响应

lb3vh1jj 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(120)

我想让茶杯和每个茶杯下面的文字在移动格式中相互重叠，而在计算机格式中保持原样，你能帮我吗？this is on computer and this is on mobile I would like to do something like this on mobile
超文本：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <body>
        <div class="selection">
          <div class="mate-florale">
            <a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
              <img src="https://imgur.com/vwQHX9K.png">
            </a>
            <div class="text-mate-florale">
              <h3 text-align="justify-content">Maté florale</h3>
            </div>
          </div> 
          
          <div class="mate-agrumes">
            <a href="https://o-mate.fr/products/mate-energisant-morning-boost">
              <img src="https://imgur.com/f079TDf.png">
            </a>
            <div class="text-mate-agrumes">
              <h3 text-align="justify-content">Maté agrumes</h3>
            </div> 
          </div>

          <div class="mate-fruitee">
            <a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
              <img src="https://imgur.com/vQvNboK.png">
            </a>
            <div class="text-mate-fruitee">
              <h3 text-align="justify-content">Maté fruitée</h3>
            </div>
          </div>
        </div>

    </body>
  </head>

CSS：

img {
  width: 200px;
  margin: 30px;
  padding: center;
}

.selection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
}

很明显我不知道我应该做什么，这就是为什么我请求你的帮助。谢谢!

css

来源：https://stackoverflow.com/questions/75072492/i-dont-know-how-to-do-css-responsive

1条答案

按热度按时间

eit6fx6z1#

你可以把每一张咖啡的图片和它的文字放在一个flex column里，这样你就有了一行三列，而且它们在移动设备上也很容易管理

img {
  width: 200px;
  margin: 30px;
  padding: center;
}

.selection {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  flex-wrap: wrap;
  gap: 10px;
}

.ccol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ccol div {
  margin: auto;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">

  <body>
    <div class="selection">
    
      <div class="mate-florale ccol">
        <a href="https://o-mate.fr/products/mate-hibiscus-purple-mate">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-florale">
          <h3>Maté florale</h3>
          </div>
      </div>

      <div class="mate-agrumes ccol">
        <a href="https://o-mate.fr/products/mate-energisant-morning-boost">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-agrumes">
          <h3 text-align="justify-content">Maté agrumes</h3>
        </div>
      </div>

      <div class="mate-fruitee ccol">
        <a href="https://o-mate.fr/products/mate-fruits-rouges-fruity-mate">
          <img src="https://static.toiimg.com/photo/89078867.cms">
        </a>
        <div class="text-mate-fruitee">
          <h3 text-align="justify-content">Maté fruitée</h3>
        </div>
      </div>
    </div>

  </body>
  </head>

赞(0）回复(0）举报 2023-01-14

我来回答

我不知道如何做CSS响应

1条答案

相关问题

热门标签

最新问答