調整瀏覽器大小時我的 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>

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>