html - 调整浏览器大小时我的 div 重叠

Question

我对此很陌生，我一直试图找出我的布局中的问题。调整大小时，我的 div .containerstacks 在右侧重叠。我该如何解决这个问题？而且，如果您认为我应该做其他任何事情，我将很高兴听到。

`.actionscontainer {
  border: 1px solid rgb(172, 178, 189);
  max-width: 50%;
  text-align: center;
  margin: auto;
  margin-top: 15px;
  background-color: #161616;
}

` `.containerstacks {
  display: flex;
  width: 100%;
  background-color: #161616;
}

` `.buttonstacks {
  background-color: #161616;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  opacity: 0.6;
  transition: 0.3s;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
  width: 100%;
}

`

<div class="actionscontainer">
  <div class="containerbuttons">
    <button id="act1" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">RFI</p></button>
    <div class="infoaction">
      <p class="p2">(Open raise)</p>
    </div>
    <button id="act2" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">vs.RFI</p></button>
    <div class="infoaction">
      <p class="p2">(Versus open raise)</p>
    </div>
    <button id="act3" class="buttonaction3bet" onclick="highlight(this)"><p class="p1">vs.3bet</p></button>
    <div class="infoaction">
      <p class="p2">(Versus 3bet)</p>
    </div>
  </div>
  <div class="containerstacks">
    <button id="100bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">100BB</p></button>
    <button id="70bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">70BB</p></button>
    <button id="60bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">60BB</p></button>
    <button id="50bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">50BB</p></button>
    <button id="40bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">40BB</p></button>
    <button id="30bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">30BB</p></button>
    <button id="25bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">25BB</p></button>
    <button id="20bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">20BB</p></button>
    <button id="17bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">17BB</p></button>
    <button id="15bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">15BB</p></button>
    <button id="12bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">12BB</p></button>
    <button id="10bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">10BB</p></button>
  </div>
  <div class="containerposition">
    <button id="EP" class="buttonpos" onclick="highlight(this)"><p class="p1">EP</p></button>
    <button id="MP" class="buttonpos" onclick="highlight(this)"><p class="p1">MP</p></button>
    <button id="MP2" class="buttonpos" onclick="highlight(this)"><p class="p1">MP2</p></button>
    <button id="HJ" class="buttonpos" onclick="highlight(this)"><p class="p1">HJ</p></button>
    <button id="CO" class="buttonpos" onclick="highlight(this)"><p class="p1">CO</p></button>
    <button id="BTN" class="buttonpos" onclick="highlight(this)"><p class="p1">BTN</p></button>
    <button id="SB" class="buttonpos" onclick="highlight(this)"><p class="p1">SB</p></button>
  </div>
</div>

标签： htmlcss

Answer 1

您需要修复片段中的多余字符。我在下面的代码段中修复了它们。

为了获得您想要的行为，您需要将 设置flex-flow为row wrap以便您的项目将换行到下一行。

然后你需要给这些项目一个flex值，1以使它们留在它们的容器中。

.actionscontainer {
  border: 1px solid rgb(172, 178, 189);
  max-width: 50%;
  text-align: center;
  margin: auto;
  margin-top: 15px;
  background-color: #161616;
}

.containerstacks {
  display: flex;
  width: 100%;
  background-color: #161616;
  flex-flow: row wrap;        /* Set to row wrap */
}

.buttonstacks {
  background-color: #161616;
  border: none;
  color: white;
  text-align: center;
  font-size: 16px;
  opacity: 0.6;
  transition: 0.3s;
  text-decoration: none;
  cursor: pointer;
  margin: auto;
  width: 100%;
  flex: 1;               /* Set flex to 1 */
}

<div class="actionscontainer">
  <div class="containerbuttons">
    <button id="act1" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">RFI</p></button>
    <div class="infoaction">
      <p class="p2">(Open raise)</p>
    </div>
    <button id="act2" class="buttonactionrfi" onclick="highlight(this)"><p class="p1">vs.RFI</p></button>
    <div class="infoaction">
      <p class="p2">(Versus open raise)</p>
    </div>
    <button id="act3" class="buttonaction3bet" onclick="highlight(this)"><p class="p1">vs.3bet</p></button>
    <div class="infoaction">
      <p class="p2">(Versus 3bet)</p>
    </div>
  </div>
  <div class="containerstacks">
    <button id="100bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">100BB</p></button>
    <button id="70bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">70BB</p></button>
    <button id="60bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">60BB</p></button>
    <button id="50bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">50BB</p></button>
    <button id="40bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">40BB</p></button>
    <button id="30bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">30BB</p></button>
    <button id="25bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">25BB</p></button>
    <button id="20bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">20BB</p></button>
    <button id="17bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">17BB</p></button>
    <button id="15bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">15BB</p></button>
    <button id="12bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">12BB</p></button>
    <button id="10bb" class="buttonstacks" onclick="highlight(this)"><p class="p1">10BB</p></button>
  </div>
  <div class="containerposition">
    <button id="EP" class="buttonpos" onclick="highlight(this)"><p class="p1">EP</p></button>
    <button id="MP" class="buttonpos" onclick="highlight(this)"><p class="p1">MP</p></button>
    <button id="MP2" class="buttonpos" onclick="highlight(this)"><p class="p1">MP2</p></button>
    <button id="HJ" class="buttonpos" onclick="highlight(this)"><p class="p1">HJ</p></button>
    <button id="CO" class="buttonpos" onclick="highlight(this)"><p class="p1">CO</p></button>
    <button id="BTN" class="buttonpos" onclick="highlight(this)"><p class="p1">BTN</p></button>
    <button id="SB" class="buttonpos" onclick="highlight(this)"><p class="p1">SB</p></button>
  </div>
</div>