Question

我在网站上有产品，它们之间有边框，但顶部，底部，左侧和右侧没有边框。

这是这样的：

a | b | c | d
--------------
e | f | g | h
--------------
j | k | l | m

其中|和 - 是边界 a到m的字母是<div>元素内的产品图像和文本。

现在我正在使用nth-child（4），nth-child（8）等来删除产品中的右边框以及类似于顶部，左边和下边框的边框，适用于4x4我目前拥有的行和列。但我希望可以选择增加行数或无限滚动而无需更改css样式。

最好的方法是什么？

Answer 1

请查看我的codepen，看看它是否有帮助。 Codepen Example

display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
grid-gap: 1px;

我正在使用CSS Grid来定义“产品”表。这是一种非常灵活的方法，基本上没有边框，但是每个单元下面的容器的背景颜色正在通过网格间隙窥视。顶部，右侧，底部，左侧外边缘没有灰色边框。这可以通过容器/单元格上的边距或填充来操纵。

根据产品网站上的实际实施情况，您可能将其嵌套在另一个容器中。请随意发表评论，我可以尝试澄清。

以下是caniuse for cross browser support info caniuse: CSS Grid Layout

的链接

当然是关于“网格”MDN CSS grid

的官方Mozilla开发者网络文档

Answer 2

您可以通过仅在右侧和底部设置边框来处理左边框和上边框：

.container div {
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

要隐藏最右边和最底边的边框，请将容器的溢出设置为隐藏，然后将容器的子项向下移动到右边边框的厚度：

.container {
  overflow: hidden;
}

.container div {
  transform: translate(1px, 1px);
}

<强>段：

.container {
  overflow: hidden;
  margin: 2em;
}

.container div {
  padding: 1em;
  box-sizing: border-box;
  width: 25%;
  transform: translate(1px, 1px);
  float: left;
  text-align: center;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

<div class="container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
</div>

Answer 3

尝试使用:nth-child选择器。

首先将border-right和border-top设置为每个div。

然后使用:nth-child(-n+4)即（1,2,3,4）删除前四个元素border-top和:nth-child(4n)即（4 ，8,12,16等。）删除行的每个第4个元素的border-right。

参考链接 nth-child CSS pseudo-class

Stack Snippet

body {
  font: 13px Verdana;
}

main {
  display: flex;
  flex-wrap: wrap;
}

div {
  flex-basis: 25%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  border-right: 1px solid black;
  border-top: 1px solid black;
}

div:nth-child(-n+4) {
  border-top: 0;
}

div:nth-child(4n) {
  border-right: 0;
}

<main>
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
</main>

如何根据浮动<div>所在的位置在浮动<div>元素之间添加边框？

3 个答案: