画廊的css网格-选择器重复15个项目-和-网格堆叠而不是下面的流动

分类：编程问答

如何解决画廊的css网格-选择器重复15个项目-和-网格堆叠而不是下面的流动

我是CSS网格的新手，正在尝试将一些东西放到缩略图库中。

我制作了一个网格（使用网格生成器），该网格有8列，12行和15个（归咎于图形设计人员：））。

我希望能够重复15个项目的模式，但让自己与选择器完全混淆。 15个项目网格位于其自身之上，这使我更加困惑：）。

生成器为我要避免的每个项目（例如.item1，.item2，.item3等）使用了一个类，而是将其替换为第n个选择器，这样我就不必每隔15个添加包装标签项目（在我的CMS中不可持续）。

想知道是否有人可以帮忙吗？

作为一个奖励问题：毫无疑问每次不会有15张照片的偶数倍（例如，在以下html中的第4格处结束）...有一种方法可以使图片的最后一行变得整洁，并且填满底行的可用空间？

额外的问题：在flexbox中可以实现这种网格吗？

非常感谢，祝您愉快。

css（我认为15n + 1远远超出了标准）：

<style>

.grid { display: grid; grid-template-columns: repeat(8,1fr); grid-template-rows: repeat(12,1fr); /*grid-auto-flow: dense; */grid-column-gap: 20px; grid-row-gap: 20px; margin-bottom: 20px; }

.grid .item { overflow: hidden; }

.grid .item img { width: 100%; height: 100%; object-fit: cover; }

.grid .item:nth-of-type(15n+1) { 
grid-row-start: 1; grid-column-start: 1; grid-row-end: 5; grid-column-end: 5;
border: 1px solid red; }

.grid .item:nth-of-type(15n+2) { 
grid-row-start: 1; grid-column-start: 5; grid-row-end: 3; grid-column-end: 9;
border: 1px solid blue; }

.grid .item:nth-of-type(15n+3) { 
grid-row-start: 3; grid-column-start: 5; grid-row-end: 5; grid-column-end: 7;
border: 1px solid #03C; }

.grid .item:nth-of-type(15n+4) { 
grid-row-start: 3; grid-column-start: 7; grid-row-end: 5; grid-column-end: 9;
border: 1px solid green; }

.grid .item:nth-of-type(15n+5) { 
grid-row-start: 5; grid-column-start: 1; grid-row-end: 7; grid-column-end: 3;
border: 1px solid orange; }

.grid .item:nth-of-type(15n+6) { 
grid-row-start: 5; grid-column-start: 3; grid-row-end: 9; grid-column-end: 7;
border: 1px solid purple; }

.grid .item:nth-of-type(15n+7) { 
grid-row-start: 7; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3;
border: 1px solid yellow; }

.grid .item:nth-of-type(15n+8) { 
grid-row-start: 5; grid-column-start: 7; grid-row-end: 9; grid-column-end: 9;
border: 1px solid #f0f; }

.grid .item:nth-of-type(15n+9) { 
grid-row-start: 9; grid-column-start: 1; grid-row-end: 11; grid-column-end: 4;
border: 1px solid grey; }

.grid .item:nth-of-type(15n+10) { 
grid-row-start: 9; grid-column-start: 6; grid-row-end: 11; grid-column-end: 9;
border: 1px solid tomato; }

.grid .item:nth-of-type(15n+11) { 
grid-row-start: 9; grid-column-start: 4; grid-row-end: 11; grid-column-end: 6;
border: 1px solid #0F0; }

.grid .item:nth-of-type(15n+12) { 
grid-row-start: 11; grid-column-start: 1; grid-row-end: 13; grid-column-end: 3;
border: 1px solid #CF9; }

.grid .item:nth-of-type(15n+13) { 
grid-row-start: 11; grid-column-start: 3; grid-row-end: 13; grid-column-end: 5;
border: 1px solid #F39; }

.grid .item:nth-of-type(15n+14) { 
grid-row-start: 11; grid-column-start: 5; grid-row-end: 13; grid-column-end: 7;
border: 1px solid #93C; }

.grid .item:nth-of-type(15n+15) { 
grid-row-start: 11; grid-column-start: 7; grid-row-end: 13; grid-column-end: 9;
border: 1px solid #066; } 


@media only screen and (max-width: 650px) {

.grid { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(8,1fr); }
.grid .item:nth-of-type(15n+1) { grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; }
.grid .item:nth-of-type(15n+2) { grid-row-start: 1; grid-column-start: 2; grid-row-end: 2; grid-column-end: 3; }
.grid .item:nth-of-type(15n+3) { grid-row-start: 2; grid-column-start: 1; grid-row-end: 3; grid-column-end: 2; }
.grid .item:nth-of-type(15n+4) { grid-row-start: 2; grid-column-start: 2; grid-row-end: 3; grid-column-end: 3; }
.grid .item:nth-of-type(15n+5) { grid-row-start: 3; grid-column-start: 1; grid-row-end: 4; grid-column-end: 2; }
.grid .item:nth-of-type(15n+6) { grid-row-start: 3; grid-column-start: 2; grid-row-end: 4; grid-column-end: 3; }
.grid .item:nth-of-type(15n+7) { grid-row-start: 4; grid-column-start: 1; grid-row-end: 5; grid-column-end: 2; }
.grid .item:nth-of-type(15n+8) { grid-row-start: 4; grid-column-start: 2; grid-row-end: 5; grid-column-end: 3; }
.grid .item:nth-of-type(15n+9) { grid-row-start: 5; grid-column-start: 1; grid-row-end: 6; grid-column-end: 2; }
.grid .item:nth-of-type(15n+10) { grid-row-start: 5; grid-column-start: 2; grid-row-end: 6; grid-column-end: 3; }
.grid .item:nth-of-type(15n+11) { grid-row-start: 6; grid-column-start: 1; grid-row-end: 7; grid-column-end: 2; }
.grid .item:nth-of-type(15n+12) { grid-row-start: 6; grid-column-start: 2; grid-row-end: 7; grid-column-end: 3; }
.grid .item:nth-of-type(15n+13) { grid-row-start: 7; grid-column-start: 1; grid-row-end: 8; grid-column-end: 2; }
.grid .item:nth-of-type(15n+14) { grid-row-start: 7; grid-column-start: 2; grid-row-end: 8; grid-column-end: 3; }
.grid .item:nth-of-type(15n+15) { grid-row-start: 8; grid-column-start: 1; grid-row-end: 9; grid-column-end: 3; } 

}

@media only screen and (max-width: 480px) {

.grid { grid-template-columns: repeat(1,1fr); grid-template-rows: repeat(1,1fr); grid-column-gap: 0; grid-row-gap: 20px; }
.grid .item:nth-of-type(15n+1) { grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2; }
.grid .item:nth-of-type(15n+2) { grid-row-start: 2; grid-column-start: 1; grid-row-end: 3; grid-column-end: 2; }
.grid .item:nth-of-type(15n+3) { grid-row-start: 3; grid-column-start: 1; grid-row-end: 4; grid-column-end: 2; }
.grid .item:nth-of-type(15n+4) { grid-row-start: 4; grid-column-start: 1; grid-row-end: 5; grid-column-end: 2; }
.grid .item:nth-of-type(15n+5) { grid-row-start: 5; grid-column-start: 1; grid-row-end: 6; grid-column-end: 2; }
.grid .item:nth-of-type(15n+6) { grid-row-start: 6; grid-column-start: 1; grid-row-end: 7; grid-column-end: 2; }
.grid .item:nth-of-type(15n+7) { grid-row-start: 7; grid-column-start: 1; grid-row-end: 8; grid-column-end: 2; }
.grid .item:nth-of-type(15n+8) { grid-row-start: 8; grid-column-start: 1; grid-row-end: 9; grid-column-end: 2; }
.grid .item:nth-of-type(15n+9) { grid-row-start: 9; grid-column-start: 1; grid-row-end: 10; grid-column-end: 2; }
.grid .item:nth-of-type(15n+10) { grid-row-start: 10; grid-column-start: 1; grid-row-end: 11; grid-column-end: 2; }
.grid .item:nth-of-type(15n+11) { grid-row-start: 11; grid-column-start: 1; grid-row-end: 12; grid-column-end: 2; }
.grid .item:nth-of-type(15n+12) { grid-row-start: 12; grid-column-start: 1; grid-row-end: 13; grid-column-end: 2; }
.grid .item:nth-of-type(15n+13) { grid-row-start: 13; grid-column-start: 1; grid-row-end: 14; grid-column-end: 2; }
.grid .item:nth-of-type(15n+14) { grid-row-start: 14; grid-column-start: 1; grid-row-end: 15; grid-column-end: 2; }
.grid .item:nth-of-type(15n+15) { grid-row-start: 15; grid-column-start: 1; grid-row-end: 16; grid-column-end: 2; } 

}

</style>

html（我认为可以）：

<div class="grid">

<!--1st grid-->
 <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
 <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
 <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
 <!--4th row-->
  <div class="item">1 - 12</div>
  <div class="item">1 - 13</div>
  <div class="item">1 - 14</div>
  <div class="item">1 - 15</div>

<!--2nd grid-->
 <!--1st row-->
  <div class="item">2 - 01</div>
  <div class="item">2 - 02</div>
  <div class="item">2 - 03</div>
  <div class="item">2 - 04</div>
 <!--2nd row-->
  <div class="item">2 - 05</div>
  <div class="item">2 - 06</div>
  <div class="item">2 - 07</div>
  <div class="item">2 - 08</div>
 <!--3rd row-->
  <div class="item">2 - 09</div>
  <div class="item">2 - 10</div>
  <div class="item">2 - 11</div>
 <!--4th row-->
  <div class="item">2 - 12</div>
  <div class="item">2 - 13</div>
  <div class="item">2 - 14</div>
  <div class="item">2 - 15</div>

<!--3rd grid-->
 <!--1st row-->
  <div class="item">3 - 01</div>
  <div class="item">3 - 02</div>
  <div class="item">3 - 03</div>
  <div class="item">3 - 04</div>
 <!--2nd row-->
  <div class="item">3 - 05</div>
  <div class="item">3 - 06</div>
  <div class="item">3 - 07</div>
  <div class="item">3 - 08</div>
 <!--3rd row-->
  <div class="item">3 - 09</div>
  <div class="item">3 - 10</div>
  <div class="item">3 - 11</div>
 <!--4th row-->
  <div class="item">3 - 12</div>
  <div class="item">3 - 13</div>
  <div class="item">3 - 14</div>
  <div class="item">3 - 15</div>

<!--4th grid (incomplete)-->
 <!--1st row-->
  <div class="item">4 - 01</div>
  <div class="item">4 - 02</div>
  <div class="item">4 - 03</div>
  <div class="item">4 - 04</div>
 <!--2nd row-->
  <div class="item">4 - 05</div>
  <div class="item">4 - 06</div>
  <div class="item">4 - 07</div>

</div>

编辑：根据Temani的代码显示“列清除” css（不确定这是否是添加的正确方法）

@media only screen and (min-width: 650px) {

/*adjustments to neaten columns if the final grid is incomplete (eg less than 15 images)*/

/* If 15 is missing,make 13 and 14 bigger */
  .grid .item:nth-of-type(15n+13):nth-last-child(2),.grid .item:nth-of-type(15n+14):last-child {
     grid-column:span 3;
  }
/**/

/* If 14 is missing,make 12 and 13 bigger */
  .grid .item:nth-of-type(15n+12):nth-last-child(2),.grid .item:nth-of-type(15n+13):last-child {
     grid-column:span 4;
  }
/**/

/* If 13 is missing,make 12 full width */
  .grid .item:nth-of-type(15n+12):last-child {
     grid-column:1/-1;
  }
/**/

/* If 11 is missing,make 9 and 10 bigger */
  .grid .item:nth-of-type(15n+9):nth-last-child(2),.grid .item:nth-of-type(15n+10):last-child {
     grid-column:span 4;
  }
/**/

/* If 10 is missing,make 9 full width */
  .grid .item:nth-of-type(15n+9):last-child {
     grid-column:1/-1;
  }
/**/

/* If 8 is missing,make 5 and 7 bigger */
  .grid .item:nth-of-type(15n+5),.grid .item:nth-of-type(15n+7):last-child {
     grid-column:span 2;
  }
/**/

/* If 7 is missing,make 5 bigger */
  .grid .item:nth-of-type(15n+5):nth-last-child(2) {
     grid-column:span 4;
  }
/**/

/* If 6 is missing,make 5 full width */
  .grid .item:nth-of-type(15n+5):last-child {
     grid-column:1/-1;
  }
/**/

/* If 4 is missing,make 3 bigger */
  .grid .item:nth-of-type(15n+3):last-child {
     grid-column:span 4;
  }
/**/

/* If 2 is missing,make 1 full width */
  .grid .item:nth-of-type(15n+1):last-child {
     grid-column:1/-1;
  }
/**/

}


@media only screen and (min-width: 480px) and (max-width: 649px) {

/*adjustments to neaten columns if there is an odd number of items (in total,combined for all grids)*/

/* If ending on odd number,make last item full width */
  .grid .item:nth-of-type(odd):last-child {
     grid-column:1/-1;
  }
/**/

}

解决方法

您的主要问题是您明确设置了每个项目的位置，这是错误的方法。相反，您只需要定义大小并让浏览器自动放置该项目即可。

您还可以将具有相同大小的元素分组在一起，而无需定义固定的行数，因为您需要重复的模式。仅需要定义列。

以下是一个示例，您可以在其中轻松理解并确定窍门：

.grid {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-auto-flow:dense; /* fill all the cells */
  grid-auto-rows: 1fr; /* define only the size of each row */
  grid-gap: 20px;
  margin-bottom: 20px;
}

.grid .item:nth-of-type(15n+1),.grid .item:nth-of-type(15n+6){
  grid-column:span 4; /* take 4 columns */
  grid-row:span 2; /* take 2 rows */
  border: 1px solid red;
}

.grid .item:nth-of-type(15n+2) {
  grid-column:span 4; /* take 4 columns */
  border: 1px solid blue;
}

.grid .item:nth-of-type(15n+3),.grid .item:nth-of-type(15n+4),.grid .item:nth-of-type(15n+5),.grid .item:nth-of-type(15n+7),.grid .item:nth-of-type(15n+11),.grid .item:nth-of-type(15n+12),.grid .item:nth-of-type(15n+13),.grid .item:nth-of-type(15n+14),.grid .item:nth-of-type(15n+15){
  border: 1px solid #03C;
  grid-column:span 2; /* take 2 columns */
}
.grid .item:nth-of-type(15n+7) {
  grid-column:1 / span 2; /* here we need to explicitely set the position to first column + take 2 columns */
}

.grid .item:nth-of-type(15n+8) {
  grid-row:span 2; /* take 2 rows */
  grid-column:span 2/-1; /* here also we need an explicit position at the last columns */
  border: 1px solid #f0f;
}

.grid .item:nth-of-type(15n+9) {
  grid-column:span 3; /* take 3 columns */
  border: 1px solid grey;
}

.grid .item:nth-of-type(15n+10) {
  grid-column: span 3 / -1; /* take 3 columns from the end*/
  border: 1px solid green;
}


@media only screen and (max-width: 650px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* we no more need an explicit size so we put all to auto */
  .grid .item:nth-of-type(n) {
    grid-row:auto;
    grid-column:auto;
  }
  /**/ 
}

@media only screen and (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1,1fr);
    grid-row-gap: 20px;
  }
}
<div class="grid">

  <!--1st grid-->
  <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
  <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
  <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
  <!--4th row-->
  <div class="item">1 - 12</div>
  <div class="item">1 - 13</div>
  <div class="item">1 - 14</div>
  <div class="item">1 - 15</div>

  <!--2nd grid-->
  <!--1st row-->
  <div class="item">2 - 01</div>
  <div class="item">2 - 02</div>
  <div class="item">2 - 03</div>
  <div class="item">2 - 04</div>
  <!--2nd row-->
  <div class="item">2 - 05</div>
  <div class="item">2 - 06</div>
  <div class="item">2 - 07</div>
  <div class="item">2 - 08</div>
  <!--3rd row-->
  <div class="item">2 - 09</div>
  <div class="item">2 - 10</div>
  <div class="item">2 - 11</div>
  <!--4th row-->
  <div class="item">2 - 12</div>
  <div class="item">2 - 13</div>
  <div class="item">2 - 14</div>
  <div class="item">2 - 15</div>

  <!--3rd grid-->
  <!--1st row-->
  <div class="item">3 - 01</div>
  <div class="item">3 - 02</div>
  <div class="item">3 - 03</div>
  <div class="item">3 - 04</div>
  <!--2nd row-->
  <div class="item">3 - 05</div>
  <div class="item">3 - 06</div>
  <div class="item">3 - 07</div>
  <div class="item">3 - 08</div>
  <!--3rd row-->
  <div class="item">3 - 09</div>
  <div class="item">3 - 10</div>
  <div class="item">3 - 11</div>
  <!--4th row-->
  <div class="item">3 - 12</div>
  <div class="item">3 - 13</div>
  <div class="item">3 - 14</div>
  <div class="item">3 - 15</div>

  <!--4th grid (incomplete)-->
  <!--1st row-->
  <div class="item">4 - 01</div>
  <div class="item">4 - 02</div>
  <div class="item">4 - 03</div>
  <div class="item">4 - 04</div>
  <!--2nd row-->
  <div class="item">4 - 05</div>
  <div class="item">4 - 06</div>
  <div class="item">4 - 07</div>

</div>

在flexbox中可以实现这种网格吗？

是的，但是要实现它，您会头疼很多，而且它非常hacky。 CSS网格是最合适的解决方案。

作为一个奖励问题：毫无疑问每次不会有15张照片的偶数倍（例如，在以下html中的第4格处结束）...有一种方法可以使图片的最后一行变得整洁，并且填满底行的可用空间？

是的，但是您需要为每种情况编写一个特定的规则以标识最后一个项目，例如nth-child(15n + x):last-child。这将为您提供15条不同的规则。

以下是一些示例：

.grid {
  display: grid;
  grid-template-columns: repeat(8,1fr);
  grid-auto-flow:dense; /* fill all the cells */
  grid-auto-rows: 1fr; /* define only the size of each row */
  grid-gap: 20px;
  margin-bottom: 10px;
  border:5px solid;
}

.grid .item:nth-of-type(15n+1),.grid .item:nth-of-type(15n+15){
  border: 1px solid #03C;
  grid-column:span 2; /* take 2 columns */
}
.grid .item:nth-of-type(15n+7) {
  grid-column:1 / span 2; /* here we need to explicitely set the position to first column + take 2 columns */
}

.grid .item:nth-of-type(15n+8) {
  grid-row:span 2; /* take 2 rows */
  grid-column:span 2/-1; /* here also we need an explicit position at the last columns */
  border: 1px solid #f0f;
}

.grid .item:nth-of-type(15n+9) {
  grid-column:span 3; /* take 3 columns */
  border: 1px solid grey;
}

.grid .item:nth-of-type(15n+10) {
  grid-column: span 3 / -1; /* take 3 columns from the end*/
  border: 1px solid green;
}

/* If 15 is no there we make the last 13 and 14 bigger */
  .grid .item:nth-of-type(15n+13):nth-last-child(2),.grid .item:nth-of-type(15n+14):last-child {
     grid-column:span 3;
  }
/**/

/* If 15 & 14 no there we make the last 12 and 13 bigger */
  .grid .item:nth-of-type(15n+12):nth-last-child(2),.grid .item:nth-of-type(15n+13):last-child {
     grid-column:span 4;
  }
/**/

/* If 15 & 14 & 13 no there we make the last 12 take all the row */
  .grid .item:nth-of-type(15n+12):last-child {
     grid-column:1/-1;
  }
/**/

@media only screen and (max-width: 650px) {
  .grid {
    grid-template-columns: repeat(2,1fr);
  }
  /* we no more need an explicit size so we put all to auto */
  .grid .item:nth-of-type(n) {
    grid-row:auto!important;
    grid-column:auto!important;
  }
  /**/ 
}

@media only screen and (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(1,1fr);
    grid-row-gap: 20px;
  }
}
<div class="grid">

  <!--1st grid-->
  <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
  <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
  <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
  <!--4th row-->
  <div class="item">1 - 12</div>
  <div class="item">1 - 13</div>
  <div class="item">1 - 14</div>

</div>

<div class="grid">

  <!--1st grid-->
  <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
  <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
  <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
  <!--4th row-->
  <div class="item">1 - 12</div>
  <div class="item">1 - 13</div>

</div>

<div class="grid">

  <!--1st grid-->
  <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
  <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
  <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>
  <!--4th row-->
  <div class="item">1 - 12</div>

</div>

<div class="grid">

  <!--1st grid-->
  <!--1st row-->
  <div class="item">1 - 01</div>
  <div class="item">1 - 02</div>
  <div class="item">1 - 03</div>
  <div class="item">1 - 04</div>
  <!--2nd row-->
  <div class="item">1 - 05</div>
  <div class="item">1 - 06</div>
  <div class="item">1 - 07</div>
  <div class="item">1 - 08</div>
  <!--3rd row-->
  <div class="item">1 - 09</div>
  <div class="item">1 - 10</div>
  <div class="item">1 - 11</div>

</div>

我没有涵盖所有情况，但您有主意，可以按照相同的方式继续进行。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot