我試圖代表一個簡單的游戲板來實現“Flood it”游戲，它由一個由 m 矩陣表示的表格組成，表格的內容是使用 javascript 函數動態設置的。我寫了這段CSS：html, body { height: 100%;}table { border-style: solid; width: 30%;}td { position: relative; border-style: solid;}td:after { content: ""; display: block; padding-bottom: 100%;}div#game_board_container { display: block; height: 50%; background-color: red;}div.cell_content { position: absolute; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center;}它用于定義一些 html 的布局，可以簡化為：<div id="game_board_container"> <table id="game_board"> <table></div>更新后，表行看起來就像<tr><td><div class="cell_content"></div></td>....</tr>每行 m 個 div，每個表 n 行。css適用于n×n和n×m矩陣，其中n<m（列多于行），我得到一個漂亮的正方形或矩形矩陣，其中正方形單元格的大小根據css定義受寬度限制；但是當 n > m 時，行會朝頁面底部堆疊；我知道這是由于我使用“響應式方形設計”將我的單元格定義為方形而引起的，而且我的表格尺寸僅由其寬度定義，不幸的是試圖定義高度或最大-我的桌子的高度或將其包裝在高度定義的容器中沒有任何作用......編輯：我覺得我需要指定我希望單元格縮小，游戲板表保持其尺寸，這里是瀏覽器頁面高度和寬度的 30%。今天下午我嘗試了很多選擇，但沒有一個有效。因為我對 css 很陌生，所以我很確定我錯過了一些東西，但我看不到什么......
1 回答
烙印99
TA貢獻1829條經驗 獲得超13個贊
您最好使用 div 和 css 網格，而不是使用表格（從語義上講，表格僅用于表格數據）。使用媒體查詢，您可以更輕松地相應調整框的數量。
.board {
display: grid;
grid-template-columns: repeat(4, 50px);
grid-template-rows: repeat(4,50px);
grid-gap: 10px;
}
.box {
background-color: dodgerblue;
color: white;
}
<div class="board">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
</div>
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消