CSS-当添加更多正方形时，如何在div内使正方形/正方形适合并调整大小？

如何解决CSS-当添加更多正方形时，如何在div内使正方形/正方形适合并调整大小？

我正在用html和css制作会员卡，并且我可以选择让用户选择div内的平方数。

我的问题是，当用户选择的数字多于一个特定数字时，正方形从div中消失，而不是调整大小并适合div。

有人可以帮我吗？

代码如下：

#card{
  position: relative;
  height: 250px;
  margin: 15px;
  width: 400px
}

#squares{
  position: absolute;
  bottom: 20px;
 width: 100%;
  z-index: 10;
  text-align: center;
 margin: 0 auto;
  top: 10px;
}

.square{
  height: 50px;
  width: 50px;
  background-color: white;
  border: 1px solid #1e2023;
  margin: 5px;
 display: inline-block
}

#cardDescription{
  position: absolute;
  z-index: 11;
  width: 100%;
  background-color: white;
  text-align: center;
  height: 50px;
  bottom: 20px;
}

#userPhoto{
 position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
}

 <div id="card">
      <img id="userPhoto"/>
      <div id="squares">
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
      </div>
      <div id="cardDescription">
        <h1>Test text</h1>
      </div>
    </div>

   

如果有人可以帮助我，我将不胜感激

解决方法

您使用了很多绝对位置。绝对位置没有高度，因此您应该给它一个值，这样就不能得到主要结果。 使用您的图像作为背景。 并且仅对文本使用绝对位置。 我对我们的代码进行了更改。

    #card{
  position: relative;
  margin: 15px;
  width: 400px;
  background: url('https://i.picsum.photos/id/64/200/300.jpg?hmac=9MtSCC-H4DQRFtYARRhBDmbZhrJlRQJ2NQLowTY7A-s') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#squares{
 width: 100%;
  z-index: 10;
  text-align: center;
 margin: 0 auto;
 padding-bottom: 70px;
}

.square{
  height: 50px;
  width: 50px;
  background-color: white;
  border: 1px solid #1e2023;
  margin: 5px;
 display: inline-block
}

#cardDescription{
position: absolute;
  z-index: 11;
  width: 100%;
  background-color: white;
  text-align: center;
  height: 50px;
  bottom: 20px;
}

#userPhoto{
  width: 100%;
  background-color: black;
}

 <div id="card">
      <div id="squares">
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
        <span class="square"></span>
      </div>
      <div id="cardDescription">
        <h1>Test text</h1>
      </div>
    </div>

   

,

通过使用CSS Flexbox，您可以完全避免使用职位。这样，元素将自动按照相同的结构进行包装。

此外，您可以通过设置min-height而不是height来使容器生长而不会溢出。

如果您想要更全面的CSS Flexbox指南，可以查看CSS Tricks' Guide to Flexbox

#card {
  min-height: 250px;
  margin: 15px;
  padding: 15px 0;
  width: 400px;
  background-color: #444444;
  text-align: center;
}

#userPhoto {
  margin: 15px;
}

#squares {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square {
  height: 50px;
  width: 50px;
  margin: 10px;
  background-color: white;
  border: 1px solid #1e2023;
}

#cardDescription {
  width: 100%;
  text-align: center;
  background-color: #fff;
  height: 50px;
}

<div id="card">
  <img id="userPhoto" src="https://via.placeholder.com/150" />
  <div id="squares">
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
    <span class="square"></span>
  </div>
  <div id="cardDescription">
    <h1>Test text</h1>
  </div>
</div>