文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >具有多个3x3网格的CSS布局，每个角一个

问具有多个3x3网格的CSS布局，每个角一个
EN

Stack Overflow用户
提问于 2020-03-08 22:07:17
回答 2查看 116关注 0票数 0

我正在开发一个单屏幕的JavaScript web应用程序。它有几个屏幕，用户可以执行一些计时测试来获得总分。我承认我不是GUI设计方面的专家，尽管我非常喜欢使用Visual Studio xaml和Android Studio布局。

目前，我正在尝试添加一个新的屏幕，它应该有以下布局。它应该在中心有一个矩形，有4个3x3正方形的网格，中心矩形的每个角落都有一个网格，中间有一个较小的正方形。(中间的“加号”可以只是一个带有图像的正方形)。

​

​

然后有一些JavaScript代码，它应该以几种模式改变块的颜色，重复几次，并要求特定的用户输入，但这是最容易的部分。

我的问题是在屏幕上获得所需的屏幕布局，这比我最初想象的要难得多。我已经找到了this question，但无法让它正常工作。

在尝试了一些事情之后，我被难住了，请看下面的代码。顺便说一句，我刚刚创建了一个单独的HTML和CSS文件并开始试验，但是如果有人能建议一个更有效的方法，我洗耳恭听。

​

代码语言：javascript
复制
.container {
}

body {
	font-family: Arial;
	background: #080;
	overflow: "hidden";
}

/* color for blocks */
.red    {background: #f00;}
.orange {background: #f80;}
.yellow {background: #ff0;}
.green  {background: #0f0;}
.cyan   {background: #0ff;}
.blue   {background: #00f;}
.purple {background: #f0f;}

/* containing area for the four 3x3 grids */
.block3_area {
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	background: #0cf;
}

/* one 3x3 grid */
.block3_grid {
	display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	
	width: 30%;
	height: 30%;
}

.grid_tl {float: top left;}
.grid_tr {float: top right;}
.grid_bl {float: bottom-left;}
.grid_br {float: bottom-right;}

/* the inner blocks of the grid */
.game3block {
	width: 50px;
	height: 50px;
}

.game3block > .game3block {
  padding: 10px;
  background-color: #ccc;
}
代码语言：javascript
复制
<!DOCTYPE HTML>
<html>
	<head>
		<title>3x3 grid css test</title>
	</head>
	<link rel="stylesheet" type="text/css" href="grid.css">

	<body>

		<!-- game 3 -->
		<div class="block3_area">
			<div class="block3_grid grid_tl">
				<!-- top left grid, top row -->
				<div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
				<div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
				<div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

				<!-- top left grid, middle row -->
				<div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
				<div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
				<div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

				<!-- top left grid, bottom row -->
				<div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
				<div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
				<div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
			</div>

			<div class="block3_grid grid_tr">
				<!-- top right grid, top row -->
				<div id="block_3_2_1" class="game3block green">TR-1</div>
				<div id="block_3_2_1" class="game3block green">TR-2</div>
				<div id="block_3_2_1" class="game3block green">TR-3</div>

				<!-- top right grid, middle row -->
				<div id="block_3_2_1" class="game3block green">TR-4</div>
				<div id="block_3_2_1" class="game3block green">TR-5</div>
				<div id="block_3_2_1" class="game3block green">TR-6</div>

				<!-- top right grid, bottom row -->
				<div id="block_3_2_1" class="game3block green">TR-7</div>
				<div id="block_3_2_1" class="game3block green">TR-8</div>
				<div id="block_3_2_1" class="game3block green">TR-9</div>
			</div>

			<div class="block3_grid grid_bl">
				<!-- bottom left grid, top row -->
				<div id="block_3_3_1" class="game3block blue">BL-1</div>
				<div id="block_3_3_1" class="game3block blue">BL-2</div>
				<div id="block_3_3_1" class="game3block blue">BL-3</div>

				<!-- bottom left grid, middle row -->
				<div id="block_3_3_1" class="game3block blue">BL-4</div>
				<div id="block_3_3_1" class="game3block blue">BL-5</div>
				<div id="block_3_3_1" class="game3block blue">BL-6</div>

				<!-- bottom left grid, bottom row -->
				<div id="block_3_3_1" class="game3block blue">BL-7</div>
				<div id="block_3_3_1" class="game3block blue">BL-8</div>
				<div id="block_3_3_1" class="game3block blue">BL-9</div>
			</div>

			<div class="block3_grid grid_br">
				<!-- bottom left grid, top row -->
				<div id="block_3_4_1" class="game3block yellow">BR-1</div>
				<div id="block_3_4_1" class="game3block yellow">BR-2</div>
				<div id="block_3_4_1" class="game3block yellow">BR-3</div>

				<!-- bottom left grid, middle row -->
				<div id="block_3_4_1" class="game3block yellow">BR-4</div>
				<div id="block_3_4_1" class="game3block yellow">BR-5</div>
				<div id="block_3_4_1" class="game3block yellow">BR-6</div>

				<!-- bottom left grid, bottom row -->
				<div id="block_3_4_1" class="game3block yellow">BR-7</div>
				<div id="block_3_4_1" class="game3block yellow">BR-8</div>
				<div id="block_3_4_1" class="game3block yellow">BR-9</div>
			</div>
		</div>
	</body>
</html>

​

有人知道如何得到这个布局吗？任何帮助都是非常感谢的。

html
css
EN

回答 2

Stack Overflow用户

发布于 2020-03-08 22:52:06

https://codepen.io/ud-kazi/pen/poJdGLL

代码语言：javascript
复制
body{
  background:green;
}

.wrapper{
  width:300px;
  height:300px;
  background:pink;
  margin:0 auto;
}

.blue{
  float:left;
  margin-bottom:10px;
}

.blue-box{
  
  margin-right:52px;
}

.blue-box div{
  height:40px;
  width:40px;
  background:blue;
  border:0.5px solid yellow;
  float:left;
}


.red{
  float:left;
   margin-bottom:10px;
}

.red-box{
  
}

.red-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid yellow;
  float:left;
}


.orange{
  float:left;
}

.orange-box{
 
  margin-right:52px;
}

.orange-box div{
  height:40px;
  width:40px;
  background:red;
  border:0.5px solid orange;
  float:left;
}




.black{
  float:left;
}



.black-box div{
  height:40px;
  width:40px;
  background:black;
  border:0.5px solid yellow;
  float:left;
}

.plus{
  text-align:center;
  font-size:30px;
  color:white;
}
代码语言：javascript
复制
<div class="wrapper">
  <div class="blue">
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="blue-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="red">
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="red-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
    
  <div class="plus">+</div>
  
    <div class="orange">
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="orange-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
  <div class="black">
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
    <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
     <div class="black-box">
      <div>
      </div>
       <div>
      </div>
       <div>
      </div>
    </div>
  </div>
</div>

​

票数 0
EN

Stack Overflow用户

发布于 2020-03-08 23:36:28

如果您可以使用Flex和grid，它们可以为您提供帮助。

如果是+符号，则具有额外标记的示例：

​

代码语言：javascript
复制
/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area>div.middle {
  grid-row: 2;
  grid-column: 2;
  width: min-content;
  text-align: center;
  justify-content: center;
  color: white;
  font-size: 50px;
  line-height: 25px;
}

.block3_area>div.middle~div {
  grid-row: 3;
}

.block3_area> :nth-child(2),
.block3_area> :nth-child(5) {
  grid-column: 3;
}

.block3_area {
  background: rgb(0, 192, 255);
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  margin: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
代码语言：javascript
复制
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="middle">+</div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

​

https://codepen.io/gc-nomade/pen/LYVOqKV

或者在背景中画的加号，如果只是关于设计的话：

​

代码语言：javascript
复制
/* color for blocks */

.red {
  background: #f00;
}

.orange {
  background: #f80;
}

.yellow {
  background: #ff0;
}

.green {
  background: #0f0;
}

.cyan {
  background: #0ff;
}

.blue {
  background: #00f;
}

.purple {
  background: #f0f;
}

.block3_area>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: max-content;
  grid-row: 1;
  grid-column: 1;
}

.block3_area>div>div {
  width: 3em;
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px white;
}

.block3_area> :nth-child(2n) {
  grid-column: 2;
}

.block3_area> :nth-child(2)~div {
  grid-row: 2;
}

.block3_area {
  background: linear-gradient(white, white) no-repeat center center, linear-gradient(white, white) no-repeat center center rgb(0, 192, 255);
  background-size: 2px 2em, 2em 2px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
  margin: auto;
  grid-gap: 1.5em;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  background: rgb(0, 128, 0);
}
代码语言：javascript
复制
<!-- game 3 -->
<div class="block3_area">
  <div class="block3_grid grid_tl">
    <!-- top left grid, top row -->
    <div id="block_3_1_1" class="game3block bl3top red">TL-1</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-2</div>
    <div id="block_3_1_1" class="game3block bl3top red">TL-3</div>

    <!-- top left grid, middle row -->
    <div id="block_3_1_1" class="game3block bl3mid red">TL-4</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-5</div>
    <div id="block_3_1_1" class="game3block bl3mid red">TL-6</div>

    <!-- top left grid, bottom row -->
    <div id="block_3_1_1" class="game3block bl3bot red">TL-7</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-8</div>
    <div id="block_3_1_1" class="game3block bl3bot red">TL-9</div>
  </div>

  <div class="block3_grid grid_tr">
    <!-- top right grid, top row -->
    <div id="block_3_2_1" class="game3block green">TR-1</div>
    <div id="block_3_2_1" class="game3block green">TR-2</div>
    <div id="block_3_2_1" class="game3block green">TR-3</div>

    <!-- top right grid, middle row -->
    <div id="block_3_2_1" class="game3block green">TR-4</div>
    <div id="block_3_2_1" class="game3block green">TR-5</div>
    <div id="block_3_2_1" class="game3block green">TR-6</div>

    <!-- top right grid, bottom row -->
    <div id="block_3_2_1" class="game3block green">TR-7</div>
    <div id="block_3_2_1" class="game3block green">TR-8</div>
    <div id="block_3_2_1" class="game3block green">TR-9</div>
  </div>
  <div class="block3_grid grid_bl">
    <!-- bottom left grid, top row -->
    <div id="block_3_3_1" class="game3block blue">BL-1</div>
    <div id="block_3_3_1" class="game3block blue">BL-2</div>
    <div id="block_3_3_1" class="game3block blue">BL-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_3_1" class="game3block blue">BL-4</div>
    <div id="block_3_3_1" class="game3block blue">BL-5</div>
    <div id="block_3_3_1" class="game3block blue">BL-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_3_1" class="game3block blue">BL-7</div>
    <div id="block_3_3_1" class="game3block blue">BL-8</div>
    <div id="block_3_3_1" class="game3block blue">BL-9</div>
  </div>

  <div class="block3_grid grid_br">
    <!-- bottom left grid, top row -->
    <div id="block_3_4_1" class="game3block yellow">BR-1</div>
    <div id="block_3_4_1" class="game3block yellow">BR-2</div>
    <div id="block_3_4_1" class="game3block yellow">BR-3</div>

    <!-- bottom left grid, middle row -->
    <div id="block_3_4_1" class="game3block yellow">BR-4</div>
    <div id="block_3_4_1" class="game3block yellow">BR-5</div>
    <div id="block_3_4_1" class="game3block yellow">BR-6</div>

    <!-- bottom left grid, bottom row -->
    <div id="block_3_4_1" class="game3block yellow">BR-7</div>
    <div id="block_3_4_1" class="game3block yellow">BR-8</div>
    <div id="block_3_4_1" class="game3block yellow">BR-9</div>
  </div>
</div>

​

https://codepen.io/gc-nomade/pen/dyoZaBG

如果您不熟悉grid和flex，这些链接对您很有用：

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

https://stackoverflow.com/questions/60588309

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档