第二个 Instagram 按钮的 CSS 属性

Question

ck1e

Asked:2022-03-08 05:21:43 +0000 UTC2022-03-08 05:21:43 +0000 UTC 2022-03-08 05:21:43 +0000 UTC

将样式添加到网格行的最后一个元素

772

如何添加border-radius网格行的最后一个元素（蓝色和灰色），就像第一个元素一样？最好不用js

.colors {
  width: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px;
}

.color:nth-child(1) {
  background-color: red;
}

.color:nth-child(2) {
  background-color: #272729;
}

.color:nth-child(3) {
  background-color: #C71F2D;
}

.color:nth-child(4) {
  background-color: #FAE03C;
}

.color:nth-child(5) {
  background-color: #1F5DA0;
}

.color:nth-child(6) {
  background-color: #F96714;
}

.color:nth-child(7) {
  background-color: #00A28A;
}

.color:nth-child(8) {
  background-color: #58C9D4;
}

.color:nth-child(9) {
  background-color: #E1E1E1;
}

.color:last-child {
  border-radius: 0px 0px 12px 0px;
}

<div class="colors">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

3 个回答

Voted

Sevastopol' · Answer 1 · 2022-03-08T07:49:24Z

如何将边框半径添加到网格行的最后一个元素（蓝色和灰色），就像第一个元素一样？最好不用js

仅借助 Grid CSS - 没办法。

我提出以下选项，使用 JavaScript。我们在做什么？

获取窗口的宽度；
结果宽度除以一个元素的宽度，即 60 像素；
结果数字向上舍入为整数。因此，我们得到一行中的元素数。我们必须向下舍入，以便父元素的宽度与一行元素的总宽度匹配，因为该属性是在 CSS 中为父元素设置的border-radius: 12px，它应该可以工作。然而，这是所有操作的重点——用父元素动态包装所有子元素，不包括空格；
我们将得到的元素数量乘以一个元素的宽度，即 60px，得到父元素的宽度。
将父元素设置为结果宽度。在 CSS 中，我们首先width删除属性。

代码分步编写：

//Узнаем ширину окна
const pageWidth = document.documentElement.scrollWidth;
console.log('Ширина окна:', pageWidth, 'px');

//Ширину окна делим на ширину элемента (60px)
const drobWidth = pageWidth / 60
console.log('Ширину поделили на 60px:', drobWidth, 'px');

//Округляем до целого числа и получаем количество элементов в одной строке
const splitWidth = parseInt(((drobWidth + "").split("."))[0], 10);
console.log('Округлили до целого числа:', splitWidth, 'элементов по 60px');

//Умножаем количество полученных элементов на ширину одного элемента и получаем ширину родительского элемента
const colorsWidth = splitWidth * 60
console.log('Ширина родительского элемента:', colorsWidth, 'px');

//Устанавливаем ширину родительскому элементу
document.querySelector('.colors').style.width = colorsWidth + 'px';

* {
  margin: 0;
}

.colors {
  /*width: 320px;*/
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px !important;
}

.color:nth-child(1) {
  background-color: red;
}

.color:nth-child(2) {
  background-color: #272729;
}

.color:nth-child(3) {
  background-color: #C71F2D;
}

.color:nth-child(4) {
  background-color: #FAE03C;
}

.color:nth-child(5) {
  background-color: #1F5DA0;
}

.color:nth-child(6) {
  background-color: #F96714;
}

.color:nth-child(7) {
  background-color: #00A28A;
}

.color:nth-child(8) {
  background-color: #58C9D4;
}

.color:nth-child(9) {
  background-color: #E1E1E1;
}

.color:nth-child(10) {
  background-color: green;
}

.color:nth-child(11) {
  background-color: gold;
}

.color:nth-child(12) {
  background-color: black;
}

.color:nth-child(13) {
  background-color: bisque;
}

.color:nth-child(14) {
  background-color: blue;
}

.color:last-child {
  border-radius: 0 0 12px 0;
}

<div class="colors">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

如果所有元素都不适合一行或没有用相同数量的元素填充所有行，并且一些元素没有完全填充就转移到下一行，那么我们找到最右边的元素前一个完全填充的线将他的右下角四舍五入。所以可能的情况是：

如果每行中有相同数量的元素，并且它们是均匀分布的：

//Узнаем ширину окна
const pageWidth = document.documentElement.scrollWidth;
//console.log('Ширина окна:', pageWidth, 'px');

//Ширину окна делим на ширину элемента (60px)
const drobWidth = pageWidth / 60
//console.log('Ширину поделили на 60px:', drobWidth, 'px');

//Округляем до целого числа и получаем количество элементов в одной строке
const splitWidth = parseInt(((drobWidth + "").split("."))[0], 10);
//console.log('Округлили до целого числа:', splitWidth, 'элементов по 60px');

//Умножаем количество полученных элементов на ширину одного элемента и получаем ширину родительского элемента
const colorsWidth = splitWidth * 60
//console.log('Ширина родительского элемента:', colorsWidth, 'px');

//Устанавливаем ширину родительскому элементу
document.querySelector('.colors').style.width = colorsWidth + 'px';


//Узнаем общее количество элементов
const elements = document.getElementsByClassName('color').length;
//console.log('Общее количество элементов:', elements);

//Узнаем возможное количество элементов в одной полностью заполненной элементами строке
const elems = colorsWidth / 60
console.log('Возможное кол-во элементов в одной полностью заполненной элементами строке:', elems);

//Узнаем количество полностью заполненных строк элементами
const lines = parseInt(((elements * 60 / colorsWidth + "").split("."))[0], 10);
console.log('Количество полностью заполненных строк элементами:', lines);

//Узнаем общую ширину всех элементов
const elementsWidth = elements * 60
//console.log('Общая ширина всех элементов:', elementsWidth, 'px');

//Узнаем количество элементов во всех полностью заполненных строках
const elems_lines = elems * lines
console.log('Количество элементов во всех полностью заполненных строках:', elems_lines);

//Условия:
//Если элементов больше, чем помещается в одну строку, то:
if (elementsWidth > elems * 60) {

  //Узнаем количество элементов (в остатке), в случае если есть дополнительные не полностью заполненные строки элементами
  if (elements > elems_lines) {
    const els = (elementsWidth - (lines * colorsWidth)) / 60
    console.log('Количество элементов в остатке:', els);
  };

  //Если есть, то последнему такому элементу добавляем дополнительный класс, чтобы скруглить правый нижний угол
  if (elements > elems_lines) {
    console.log('Есть ли не полностью заполненные строки элементами?:', 'Да');
    var list = document.querySelector('.colors')
    var item = list.getElementsByClassName('color')[elems_lines - 1];
    item.classList.add("border_bottom_right_radius");
  };
  //Если нет, то ничего не делаем
  if (elements <= elems_lines) {
    console.log('Есть ли дополнительные не полностью заполненные строки элементами?:', 'Нет');
  }

  //Если элементов меньше, чем помещается в одну строку, то последнему элементу добавляем класс, чтобы скруглить дополнительно еще и правый верхний угол
} else {
  var list = document.querySelector('.colors')
  var item = list.getElementsByClassName('color')[elements - 1];
  item.classList.add("border_top_right_radius");
};

* {
  margin: 0;
  padding: 0;
}

.colors {
  /*width: 320px;*/
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px !important;
  color: white;
  text-align: center;
  line-height: 2.5;
}

.color:nth-child(odd) {
  background-color: red;
}

.color:nth-child(even) {
  background-color: green;
}

.color:last-child {
  border-radius: 0 0 12px 0;
}

.border_bottom_right_radius {
  border-radius: 0 0 12px 0;
  background-color: yellowgreen!important;
}

.border_top_right_radius {
  border-radius: 0 12px 12px 0 !important;
  background-color: yellowgreen!important;
}

<div class="colors">
  <div class="color">1</div>
  <div class="color">2</div>
  <div class="color">3</div>
  <div class="color">4</div>
  <div class="color">5</div>
  <div class="color">6</div>
  <div class="color">7</div>
  <div class="color">8</div>
  <div class="color">9</div>
  <div class="color">10</div>
  <div class="color">11</div>
  <div class="color">12</div>
  <div class="color">13</div>
  <div class="color">14</div>
  <div class="color">15</div>
  <div class="color">16</div>
  <div class="color">17</div>
  <div class="color">18</div>
  <div class="color">19</div>
  <div class="color">20</div>
</div>

如果有不止一行并且没有足够的元素来完全填充相同数量的元素的所有行：

//Узнаем ширину окна
const pageWidth = document.documentElement.scrollWidth;
//console.log('Ширина окна:', pageWidth, 'px');

//Ширину окна делим на ширину элемента (60px)
const drobWidth = pageWidth / 60
//console.log('Ширину поделили на 60px:', drobWidth, 'px');

//Округляем до целого числа и получаем количество элементов в одной строке
const splitWidth = parseInt(((drobWidth + "").split("."))[0], 10);
//console.log('Округлили до целого числа:', splitWidth, 'элементов по 60px');

//Умножаем количество полученных элементов на ширину одного элемента и получаем ширину родительского элемента
const colorsWidth = splitWidth * 60
//console.log('Ширина родительского элемента:', colorsWidth, 'px');

//Устанавливаем ширину родительскому элементу
document.querySelector('.colors').style.width = colorsWidth + 'px';


//Узнаем общее количество элементов
const elements = document.getElementsByClassName('color').length;
//console.log('Общее количество элементов:', elements);

//Узнаем возможное количество элементов в одной полностью заполненной элементами строке
const elems = colorsWidth / 60
//console.log('Возможное кол-во элементов в одной полностью заполненной элементами строке:', elems);

//Узнаем количество полностью заполненных строк элементами
const lines = parseInt(((elements * 60 / colorsWidth + "").split("."))[0], 10);
console.log('Количество полностью заполненных строк элементами:', lines);

//Узнаем общую ширину всех элементов
const elementsWidth = elements * 60
//console.log('Общая ширина всех элементов:', elementsWidth, 'px');

//Узнаем количество элементов во всех полностью заполненных строках
const elems_lines = elems * lines
console.log('Количество элементов во всех полностью заполненных строках:', elems_lines);

//Условия:
//Если элементов больше, чем помещается в одну строку, то:
if (elementsWidth > elems * 60) {

  //Узнаем количество элементов (в остатке), в случае если есть дополнительные не полностью заполненные строки элементами
  if (elements > elems_lines) {
    const els = (elementsWidth - (lines * colorsWidth)) / 60
    console.log('Количество элементов в остатке:', els);
  };

  //Если есть, то последнему такому элементу добавляем дополнительный класс, чтобы скруглить правый нижний угол
  if (elements > elems_lines) {
    console.log('Есть ли не полностью заполненные строки элементами?:', 'Да');
    var list = document.querySelector('.colors')
    var item = list.getElementsByClassName('color')[elems_lines - 1];
    item.classList.add("border_bottom_right_radius");
  };
  //Если нет, то ничего не делаем
  if (elements <= elems_lines) {
    console.log('Есть ли дополнительные не полностью заполненные строки элементами?:', 'Нет');
  }

  //Если элементов меньше, чем помещается в одну строку, то последнему элементу добавляем класс, чтобы скруглить дополнительно еще и правый верхний угол
} else {
  var list = document.querySelector('.colors')
  var item = list.getElementsByClassName('color')[elements - 1];
  item.classList.add("border_top_right_radius");
};

* {
  margin: 0;
  padding: 0;
}

.colors {
  /*width: 320px;*/
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px !important;
  color: white;
  text-align: center;
  line-height: 2.5;
}

.color:nth-child(odd) {
  background-color: red;
}

.color:nth-child(even) {
  background-color: green;
}

.color:last-child {
  border-radius: 0 0 12px 0;
}

.border_bottom_right_radius {
  border-radius: 0 0 12px 0;
  background-color: yellowgreen!important;
}

.border_top_right_radius {
  border-radius: 0 12px 12px 0 !important;
  background-color: yellowgreen!important;
}

<div class="colors">
  <div class="color">1</div>
  <div class="color">2</div>
  <div class="color">3</div>
  <div class="color">4</div>
  <div class="color">5</div>
  <div class="color">6</div>
  <div class="color">7</div>
  <div class="color">8</div>
  <div class="color">9</div>
  <div class="color">10</div>
  <div class="color">11</div>
  <div class="color">12</div>
  <div class="color">13</div>
  <div class="color">14</div>
  <div class="color">15</div>
  <div class="color">16</div>
  <div class="color">17</div>
</div>

如果元素的数量少于可能的数量，则填充一行：

//Узнаем ширину окна
const pageWidth = document.documentElement.scrollWidth;
//console.log('Ширина окна:', pageWidth, 'px');

//Ширину окна делим на ширину элемента (60px)
const drobWidth = pageWidth / 60
//console.log('Ширину поделили на 60px:', drobWidth, 'px');

//Округляем до целого числа и получаем количество элементов в одной строке
const splitWidth = parseInt(((drobWidth + "").split("."))[0], 10);
//console.log('Округлили до целого числа:', splitWidth, 'элементов по 60px');

//Умножаем количество полученных элементов на ширину одного элемента и получаем ширину родительского элемента
const colorsWidth = splitWidth * 60
//console.log('Ширина родительского элемента:', colorsWidth, 'px');

//Устанавливаем ширину родительскому элементу
document.querySelector('.colors').style.width = colorsWidth + 'px';


//Узнаем общее количество элементов
const elements = document.getElementsByClassName('color').length;
//console.log('Общее количество элементов:', elements);

//Узнаем возможное количество элементов в одной полностью заполненной элементами строке
const elems = colorsWidth / 60
console.log('Возможное кол-во элементов в одной полностью заполненной элементами строке:', elems);

//Узнаем количество полностью заполненных строк элементами
const lines = parseInt(((elements * 60 / colorsWidth + "").split("."))[0], 10);
console.log('Количество полностью заполненных строк элементами:', lines);

//Узнаем общую ширину всех элементов
const elementsWidth = elements * 60
//console.log('Общая ширина всех элементов:', elementsWidth, 'px');

//Узнаем количество элементов во всех полностью заполненных строках
const elems_lines = elems * lines
console.log('Количество элементов во всех полностью заполненных строках:', elems_lines);

//Условия:
//Если элементов больше, чем помещается в одну строку, то:
if (elementsWidth > elems * 60) {

  //Узнаем количество элементов (в остатке), в случае если есть дополнительные не полностью заполненные строки элементами
  if (elements > elems_lines) {
    const els = (elementsWidth - (lines * colorsWidth)) / 60
    console.log('Количество элементов в остатке:', els);
  };

  //Если есть, то последнему такому элементу добавляем дополнительный класс, чтобы скруглить правый нижний угол
  if (elements > elems_lines) {
    console.log('Есть ли не полностью заполненные строки элементами?:', 'Да');
    var list = document.querySelector('.colors')
    var item = list.getElementsByClassName('color')[elems_lines - 1];
    item.classList.add("border_bottom_right_radius");
  };
  //Если нет, то ничего не делаем
  if (elements <= elems_lines) {
    console.log('Есть ли дополнительные не полностью заполненные строки элементами?:', 'Нет');
  }

  //Если элементов меньше, чем помещается в одну строку, то последнему элементу добавляем класс, чтобы скруглить дополнительно еще и правый верхний угол
} else {
  var list = document.querySelector('.colors')
  var item = list.getElementsByClassName('color')[elements - 1];
  item.classList.add("border_top_right_radius");
};

* {
  margin: 0;
  padding: 0;
}

.colors {
  /*width: 320px;*/
  display: grid;
  grid-template-columns: repeat(auto-fit, 60px);
  grid-auto-rows: 40px;
  overflow: hidden;
  border-radius: 12px !important;
  color: white;
  text-align: center;
  line-height: 2.5;
}

.color:nth-child(odd) {
  background-color: red;
}

.color:nth-child(even) {
  background-color: green;
}

.color:last-child {
  border-radius: 0 0 12px 0;
}

.border_bottom_right_radius {
  border-radius: 0 0 12px 0;
  background-color: yellowgreen!important;
}

.border_top_right_radius {
  border-radius: 0 12px 12px 0 !important;
  background-color: yellowgreen!important;
}

<div class="colors">
  <div class="color">1</div>
  <div class="color">2</div>
  <div class="color">3</div>
  <div class="color">4</div>
  <div class="color">5</div>
</div>

webDev_ · Answer 2 · 2022-03-08T05:57:00Z

webDev_

2022-03-08T05:57:00Z2022-03-08T05:57:00Z

更改width为所有元素集合的宽度：

.colors
    width: calc(5 * 60px)

如果后者是基本的，即使它与上面的不重合（如您从链接中看到的那样），那么也：

.color
    &:last-child
         border-radius: 0px 0px 12px 0px

0

ck1e · Answer 3 · 2022-03-08T20:47:00Z

通过元素迭代变体：https ://codepen.io/ck1e/pen/VwmGoLZ

const initBorderColors = function() {
  // Количество элементов в одной строке
  const quanEl = Math.floor(document.querySelector('.colors').scrollWidth / document.querySelector('.color').scrollWidth);

  document.querySelectorAll('.color').forEach(function(item, index, array) {
    // Если больше одной строки
    if (array.length / quanEl > 1) {
      // Добавляем радиусы последнему элементу первой строки
      array[quanEl - 1].classList.add("--border-r");
      // Если больше двух строк
      if (array.length / quanEl > 2) {
        // Добавляем радиусы последнему элементу первой строки
        array[array.length - array.length % quanEl - 1].classList.add("--border-br");
        // Добавляем радиусы последнему элементу предпоследней строки
        array[quanEl - 1].classList.add("--border-tr");
      }
    }
  });
}
window.addEventListener("load", initBorderColors)

.colors {
  display: flex;
  flex-wrap: wrap;
  max-width: max-content;
  overflow: hidden;
  border-radius: 12px;
}

.color {
  width: 60px;
  height: 40px;
}

@media (min-width: 992px) {
  .color {
    width: 38px;
    height: 44px;
  }
}

.color:last-child {
  border-radius: 0 0 12px 0;
  background-color: #fff;
}

.color:nth-child(2) {
  background-color: #272729;
}

.color:nth-child(3) {
  background-color: #C71F2D;
}

.color:nth-child(4) {
  background-color: #FAE03C;
}

.color:nth-child(5) {
  background-color: #1F5DA0;
}

.color:nth-child(6) {
  background-color: #F96714;
}

.color:nth-child(7) {
  background-color: #00A28A;
}

.color:nth-child(8) {
  background-color: #58C9D4;
}

.color:nth-child(9) {
  background-color: #E1E1E1;
}

.--border-r {
  border-radius: 0 12px 12px 0;
}

.--border-tr {
  border-radius: 0 12px 0 0;
}

.--border-br {
  border-radius: 0 0 12px 0;
}

<div class="colors">
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
  <div class="color"></div>
</div>

将样式添加到网格行的最后一个元素

表格填充不起作用

提示 50/50，有两个，其中一个是正确的

在 PyQt5 中停止进程

我的脚本不工作

在文本文件中写入和读取列表

如何像屏幕截图中那样并排排列这些块？

确定文本文件中每一行的字符数

将接口对象传递给 JAVA 构造函数

正确更新数据库中的数据

Python解析不是css

将样式添加到网格行的最后一个元素

3 个回答

相关问题