代码之家 › 专栏 › 技术社区 › Greg

对于HTML/CSS,如何根据我的图表覆盖/定位现有HTML网格上的矩形?

css3 html5 css html

-1

Greg · 技术社区 · 6 年前

如何将附加元素添加到现有网格中,并注意要求它们可以跨多个单元格?

背景:

假设使用HTML5和CSS3
使用DIV创建的网格,使用CSS“网格”设置格式
网格已经创建,因此要将额外的蓝色矩形以视觉方式覆盖到网格上。矩形是带有CSS格式的DIV,显示为蓝色矩形

从下面的html/css开始。要添加的其他HTML/CSS是指第一行中的第一个蓝色矩形:

<div classname=“wrapper”>
<DIV classname=“Box”>项目1</DIV>
<DIV classname=“box”>项目2</DIV>
<DIV classname=“box”>第3项</DIV>
<DIV classname=“box”>第4项</DIV>
<DIV classname=“box”>第5项</DIV>
<DIV classname=“box”>第6项</DIV>
<DIV classname=“box”>第7项</DIV>
<DIV classname=“box”>第8项</DIV>
<DIV classname=“box”>第9项</DIV>
&L/DIV & GT;
< /代码> 

 

包装{
显示:网格;
网格模板列:1fr 1fr 1fr;
}
框{
边界半径:5px;
边框:1倍纯色棕色;
字体大小:150%;
高度:120 px;
}
< /代码> <使用HTML5和CSS3的UME
使用DIV创建的网格,使用CSS“网格”设置格式
网格已经创建,因此要将额外的蓝色矩形以视觉方式覆盖到网格上。矩形是带有CSS格式的DIV,显示为蓝色矩形




从下面的html/css开始。要添加的其他HTML/CSS是指第一行中的第一个蓝色矩形:

HTML

<div className="wrapper">
  <div className="box">Item 1</div>
  <div className="box">Item 2</div>
  <div className="box">Item 3</div>
  <div className="box">Item 4</div>
  <div className="box">Item 5</div>
  <div className="box">Item 6</div>
  <div className="box">Item 7</div>
  <div className="box">Item 8</div>
  <div className="box">Item 9</div>
</div>


CSS

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

2 回复 | 直到 6 年前

vals 6 年前

由于您希望网格中的给定位置由两个不同的元素共享,因此需要为这两个元素设置特定的位置。

设置蓝色矩形的位置是向前的。以常规方式设置项目的位置有点困难。

我以一种通用的方式设置了这个,但是如果您发现选择器太难,您可以始终将网格位置设置为1乘1。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

.overlay {
   background-color: lightblue;
   height: 70px;
   margin-top: 30px;
   border-radius: 10px;
}
#ov1 {
   grid-column: 2 / span 2;
   grid-row: 1;
}
#ov2 {
   grid-column: 1 / span 2;
   grid-row: 2;
}

.box:nth-child(3n + 1) {
   grid-column: 1;
}
.box:nth-child(3n + 2) {
   grid-column: 2;
}
.box:nth-child(3n) {
   grid-column: 3;
}
.box:nth-child(-n + 3) {
   grid-row: 1;
   background-color: lightyellow;
}

.box:nth-child(-n + 6):nth-child(n + 4) {
   grid-row: 2;
   background-color: tomato;
}

<div class="wrapper">
  <div class="box">Item 1</div>
  <div class="box">Item 2</div>
  <div class="box">Item 3</div>
  <div class="box">Item 4</div>
  <div class="box">Item 5</div>
  <div class="box">Item 6</div>
  <div class="box">Item 7</div>
  <div class="box">Item 8</div>
  <div class="box">Item 9</div>
  <div class="overlay" id="ov1">Blue overlay</div>
  <div class="overlay" id="ov2">Blue overlay</div>
</div>

Dan Gamble 6 年前

如果要有固定数量的单元格(有点像日历),可以执行以下操作:

HTML

<div className="wrapper">
  <div className="box box1">Item 1</div>
  <div className="box box2">Item 2</div>
  <div className="box box3">Item 3</div>
  <div className="box box4">Item 4</div>
  <div className="box box5">Item 5</div>
  <div className="box box6">Item 6</div>
  <div className="box box7">Item 7</div>
  <div className="box box8">Item 8</div>
  <div className="box box9">Item 9</div>

  <div className="span span1">Blue span 1</div>
  <div className="span span2">Blue span 1</div>
  <div className="span span3">Blue span 1</div>
</div>

CSS

.wrapper {
  grid-template-columns: [column1] 1fr [column2] 1fr [column3] 1fr;
  grid-template-rows: [row1] auto [row2] auto [row3] auto;

  display: grid;
}

.box {
  border-radius: 5px;
  border: 1px solid brown;
  font-size: 150%;
  height: 120px;
}

.span1 {
  grid-column: column2 / span 2;
  grid-row: row1;
}

.span2 {
  grid-column: column1 / span 3;
  grid-row: row2;
}

.span3 {
  grid-column: column3;
  grid-row: row3;
}