文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS网格布局适配尺寸

问CSS网格布局适配尺寸
EN

Stack Overflow用户

提问于 2021-11-11 20:01:03

回答 1查看 78关注 0票数 1

我正在做一个学校项目，这是一个棋盘游戏，我必须把多个玩家放在一个版面上，我想用网格布局来做，但我找不到正确的位置。

我想说的是，如果容器里只有一个div，它就占了整个空间。如果容器内有两个div，它占用一半的空间，而这两个项目在彼此旁边。如果有3-4个div在两行的每一行，两个div在彼此的旁边。

我目前的代码是：

#board td{
    background-color: black;
    height: 50px;
    width: 50px;
}

#board td .playersDiv {
    height: 100%;
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;

}

#board td .playersDiv div{
    background-image: url('red.png');
    width: 100%;
    height: 100%;
    background-size: cover;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<table id="board">
    <tr>
        <td>
            <div class="playersDiv">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-11-13 14:47:59

如果我理解正确的话：

playersDiv.

When中的2、3和4DIV已经可以使用了，只有一个DIV需要跨越2列。这可以使用:only-child选择器和grid-column属性.

来实现。

#board td {
  background-color: black;
  height: 50px;
  width: 50px;
}

#board td .playersDiv {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

#board td .playersDiv div {
  /* I've change these lines so we can see the DIVs in the snippet */
  border: 1px solid red;
}

#board td .playersDiv div:only-child {
  grid-column: span 2;
}

<table id="board">
  <tr>
    <!-- 1 div -->
    <td>
      <div class="playersDiv">
        <div></div>
      </div>
    </td>
    
    <!-- 2 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
      </div>
    </td>
    
    <!-- 3 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </td>
    
    <!-- 4 div -->
    <td>
      <div class="playersDiv">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </td>
  </tr>
</table>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69934239

复制

相似问题

问CSS网格布局适配尺寸
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局适配尺寸EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS网格布局适配尺寸
EN