如何在css中並排對齊4個容器？
[英]How to align 4 containers side by side in css?
問題描述
我需要對齊 12 個按鈕，以便頂部有 4 個按鈕，側面有 3 個按鈕 (12)。 4x3 左上角（Div/Mult）和右（Add/Sub）還有 2 個按鈕
我將包含 HTML 和 CSS 文檔，如果您需要 JS 文檔，請隨時詢問。 這是我想要的樣子，我不知道如何。
Div/MultBtn 添加/SubBtn
1 2 3 4（一直到另一邊）
<!DOCTYPE html> <html> <head> <title>Math Fact Tune Up</title> <style> #buttonContainer { position: relative; top: 50%; transform: translateY(-50%); } button { display: block; margin: 0 auto; background-color: #262b2b; border-style: solid; color: white; font-family: Open Sans, sans-serif; border-radius: 5px; } .lvlButton { padding-bottom: .1em; padding-top: .1em; } body, html { height: 100%; overflow: scroll; overflow-x: hidden; background-color: #262b2b; } body { overflow: hidden; } #go { background-color: #00d10d } </style> </head> <body> <div id="buttonContainer"> <div class="lvlButton" id="divMult"> <button id="divMultBtn"> Multiplication/Division </button> </div> <br> <div class="lvlButton" id="addSub"> <button id="addSubBtn"> Addition/Subtraction </button> </div> <br> <div class="lvlButton" id="lvl1"> <button id="lvl1Btn"> Level 1 </button> </div> <br> <div class="lvlButton" id="lvl2"> <button id="lvl2Btn"> Level 2 </button> </div> <br> <div class="lvlButton" id="lvl3"> <button id="lvl3Btn"> Level 3 </button> </div> <br> <div class="lvlButton" id="lvl4"> <button id="lvl4Btn"> Level 4 </button> </div> <br> <div class="lvlButton" id="lvl5"> <button id="lvl5Btn"> Level 5 </button> </div> <br> <div class="lvlButton" id="lvl6"> <button id="lvl6Btn"> Level 6 </button> </div> <br> <div class="lvlButton" id="lvl7"> <button id="lvl7Btn"> Level 7 </button> </div> <br> <div class="lvlButton" id="lvl8"> <button id="lvl8Btn"> Level 8 </button> </div> <br> <div class="lvlButton" id="lvl9"> <button id="lvl9Btn"> Level 9 </button> </div> <br> <div class="lvlButton" id="lvl10"> <button id="lvl10Btn"> Level 10 </button> </div> <br> <div class="lvlButton" id="lvl11"> <button id="lvl11Btn"> Level 11 </button> </div> <br> <div class="lvlButton" id="lvl12"> <button id="lvl12Btn"> Level 12 </button> </div> <div class="lvlButton" id="gocontainer"> <button id="go"> GO </button> </div> </div> </body> </html>
結果圖片
1 個解決方案
解決方案1
1 已采納 2017-01-07 19:34:10
如果你想要漂浮的東西，你需要：
- 設置位置：相對
- 設置浮動：左
為什么每個 div 后面都有<br />標簽？ 這應該有效：
#buttonContainer { position: relative; top: 50%; transform: translateY(-50%); } button{ display: block; margin: 0 auto; background-color: #262b2b; border-style: solid; color: white; font-family: Open Sans, sans-serif; border-radius: 5px; } .lvlButton{ padding-bottom: .1em; padding-top:.1em; float: left; } body, html{ height:100%; overflow: scroll; overflow-x: hidden; background-color: #262b2b; } body{ overflow: hidden; } #go{ background-color: #00d10d }
<div id="buttonContainer"> <div class="lvlButton" id="divMult"> <button id="divMultBtn"> Multiplication/Division </button> </div> <div class="lvlButton" id="addSub"> <button id="addSubBtn"> Addition/Subtraction </button> </div> <div class="lvlButton" id="lvl1"> <button id="lvl1Btn"> Level 1 </button> </div> <div class="lvlButton" id="lvl2"> <button id="lvl2Btn"> Level 2 </button> </div> <div class="lvlButton" id="lvl3"> <button id="lvl3Btn"> Level 3 </button> </div> <div class="lvlButton" id="lvl4"> <button id="lvl4Btn"> Level 4 </button> </div> <div class="lvlButton" id="lvl5"> <button id="lvl5Btn"> Level 5 </button> </div> <div class="lvlButton" id="lvl6"> <button id="lvl6Btn"> Level 6 </button> </div> <div class="lvlButton" id="lvl7"> <button id="lvl7Btn"> Level 7 </button> </div> <div class="lvlButton" id="lvl8"> <button id="lvl8Btn"> Level 8 </button> </div> <div class="lvlButton" id="lvl9"> <button id="lvl9Btn"> Level 9 </button> </div> <div class="lvlButton" id="lvl10"> <button id="lvl10Btn"> Level 10 </button> </div> <div class="lvlButton" id="lvl11"> <button id="lvl11Btn"> Level 11 </button> </div> <div class="lvlButton" id="lvl12"> <button id="lvl12Btn"> Level 12 </button> </div> <div class="lvlButton" id="gocontainer"> <button id ="go"> GO </button> </div> </div>
並排排列CSS列
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.