我正在嘗試創建一個正方形的 div，這是最簡單的部分，然后在容器的增長/收縮時在內部設定等距的井字線。
我在考慮以下設定：
<div class="container">
<div class="vertical">
<div class="vertical">
<div class="horizontal">
<div class="horizontal">
</div>
但這不允許他們將容器考慮在內。有任何想法嗎？
uj5u.com熱心網友回復：
flex適合它：
* {
box-sizing: border-box;
}
.container {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap;
border: solid black;
}
.container > div {
text-align: center;
width: calc(100% / 3);
background-color: green;
border: solid red 1px;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>uj5u.com熱心網友回復：
是的，我有，但也會有抽動和腳趾的元素。因此，您還應該指定它們。然后我們可以為回應而作業。您可以代替使用表格元素。像這樣：
table{
max-width: auto;
width: 100%;
min-width: 2rem;
border: solid black;
}
th, td{
white-space: wrap;
overflow: hidden;
height: 4rem;
}
td,th {
white-space: wrap;
text-overflow: ellipsis;
border: solid black;
padding: 0.1rem;
text-align: center;
max-width: 3rem;
min-width:0rem;
cursor: pointer;
}
tr:hover {
background-color: silver;
}
img {
width: 100%;
height: 100%;
}<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>uj5u.com熱心網友回復：
在您的帖子中，您似乎計劃使用子<div>元素本身來表示垂直和水平線，而不是使用它們來表示線之間的網格單元空間。這不是一個好方法，因為在 CSS 中每個元素都代表一個 2D 矩形框，而不是一條線（有例外），這也意味著您失去了 CSS 內置border和布局功能提供的優勢和功能（例如，您的方法無法設定與其線條/邊框對齊的單元格背景）。
快速解決方案：SVG 背景圖片
您可以將單個<div>元素與 SVG 一起使用background-image：
/*
The `data:` URI is this SVG:
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<line style="stroke: rgb(0, 0, 0);" x1="100" y1="0" x2="100" y2="300"></line>
<line style="stroke: rgb(0, 0, 0);" x1="200" y1="0" x2="200" y2="300"></line>
<line style="stroke: rgb(0, 0, 0);" x1="0" y1="100" x2="300" y2="100"></line>
<line style="stroke: rgb(0, 0, 0);" x1="0" y1="200" x2="300" y2="200"></line>
</svg>
*/
.ticTacToe {
background-image: url("data:image/svg xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzAwIDMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGxpbmUgc3R5bGU9InN0cm9rZTogcmdiKDAsIDAsIDApOyIgeDE9IjEwMCIgeTE9IjAiIHgyPSIxMDAiIHkyPSIzMDAiPjwvbGluZT4NCiAgPGxpbmUgc3R5bGU9InN0cm9rZTogcmdiKDAsIDAsIDApOyIgeDE9IjIwMCIgeTE9IjAiIHgyPSIyMDAiIHkyPSIzMDAiPjwvbGluZT4NCiAgPGxpbmUgc3R5bGU9InN0cm9rZTogcmdiKDAsIDAsIDApOyIgeDE9IjAiIHkxPSIxMDAiIHgyPSIzMDAiIHkyPSIxMDAiPjwvbGluZT4NCiAgPGxpbmUgc3R5bGU9InN0cm9rZTogcmdiKDAsIDAsIDApOyIgeDE9IjAiIHkxPSIyMDAiIHgyPSIzMDAiIHkyPSIyMDAiPjwvbGluZT4NCjwvc3ZnPg==");
background-size: cover;
aspect-ratio: 1/1;
/* These properties enable the draggable resize handle for "responsive" demonstration purposes: */
resize: horizontal;
overflow: hidden;
width: 300px;
}<div class="ticTacToe"></div>一般解決方案：輸入display: grid;
第1部分：
- 聽起來您想要一個 3x3 網格，其中網格單元格嚴格為正方形 - 這正是 CSS
display: grid;的用途。 - 您還可以使用
大：
第 2 部分：井字游戲邊界
上面的網格
<table>不僅僅是一個井字游戲網格，因為所有單元格都有自己獨立的內部邊界，容器也有邊界。但是，如果您洗掉邊框（和單元格
margin: 1px;），然后只在水平居中的單元格上定義垂直邊框，并且只在垂直居中的單元格上定義水平邊框，那么它看起來像井字游戲網格，如以下：.grid3x3 { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; aspect-ratio: 1 / 1; } .grid3x3 > div { display: flex; align-items: center; justify-content: center; } .grid3x3 > div:nth-child(2), .grid3x3 > div:nth-child(5), .grid3x3 > div:nth-child(8) { border-left: 1px solid black; border-right: 1px solid black; } .grid3x3 > div:nth-child(4), .grid3x3 > div:nth-child(5), .grid3x3 > div:nth-child(6) { border-top: 1px solid black; border-bottom: 1px solid black; }<div class="grid3x3"> <div>top-left</div> <div>top-middle</div> <div>top-right</div> <div>middle-left</div> <div>center</div> <div>middle-right</div> <div>bottom-left</div> <div>bottom-middle</div> <div>bottom-right</div> </div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428663.html上一篇：用div填充html表格單元格
下一篇：將徽標影像添加到引導導航欄