Question

我遇到这种情况：https://jsfiddle.net/rozkvsdh/5/

简单地说是CSS Grid，但在某些项目中，我需要放一个功能区或其他div。

这是不可能的！

我该怎么办？

 grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  //position: absolute; it doesn't work!
  position: relative;
  top: -3px;
  left: -3px;
  .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ebb134;
    color: #fff;
  }
}

Answer 1

您需要将position: relative;放在grid-item上，然后才能使用.ribbon-wrapper上的绝对位置。

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  position: absolute;
  top: -3px;
  left: -3px;
  .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    -webkit-transform: rotate(-45deg);
    -moz-transform:    rotate(-45deg);
    -ms-transform:     rotate(-45deg);
    -o-transform:      rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 120px;
    background-color: #ebb134;
    color: #fff;
  }
}

https://jsfiddle.net/thesouthstar86/rozkvsdh/6/

Answer 2

你可以做到这一点，也适用于调整大小，但它有点乱。

间隔div是有的，所以你有高度。你需要一个，因为你希望PRO居中。我们牺牲每一方1px来完成这项工作，现在ribbon-wrapper可以是绝对的

https://jsfiddle.net/rozkvsdh/9/

HTML

<grid-item>

    <div class="ribbon-wrapper"><div class="ribbon">NEW</div></div>    
    <div class="spacer"></div>
    <div>PRO</div>
    <div class="spacer"></div>

</grid-item>

CSS

// this is new
.spacer {
  height: 88px;
  width: 1px;
}

grid-item {
  background-color: lightgreen;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; // added
}
.ribbon-wrapper {
  width: 85px; // the length should be not in px I think!
  height: 88px; // the length should be not in px I think!
  overflow: hidden;
  position: absolute;
  top: 0; // edited
  left: 0; // edited
}

Answer 3

功能区不会向左对齐，因为它是具有justify-content: center的弹性容器的流入子项。因此，功能区和内容都是并排放置的。

您可以使用margin-right: auto覆盖该设置，该设置将左对齐功能区，但它也会右对齐内容。

您可以插入invisible spacer item以在容器中创建相等的余额，同时保持内容居中。但这有点牵扯，可能没必要。

坚持使用CSS定位属性。这将定位功能区。重新调整它是另一回事：

grid-item {
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* establish nearest positioned ancestor for abspos containment */
}

.ribbon-wrapper {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.ribbon-wrapper .ribbon {
    font: bold 15px sans-serif;
    color: #333;
    text-align: center;
    transform: rotate(-45deg);
    position: relative;
    padding: 7px 0;
    top: 15px;
    left: -30px;
    width: 15vw;
    background-color: #ebb134;
    color: #fff;
}

revised fiddle

Answer 4

你可以使用伪和data attribute：

HTML5在设计时考虑了可扩展性，因为数据应与特定元素相关联，但不必具有任何已定义的含义。 data- *属性允许我们在标准的语义HTML元素上存储额外的信息，而不需要其他黑客，例如非标准属性，DOM上的额外属性

可以使用

溢出，background-clip可以帮助模仿外面的色带位置

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

vmin or vmax units可用于设置font-size，以便在填充和协调时通过em调整功能区的大小。

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

最终可以添加shadow，linear-gradient可以帮助绘制倾斜的阴影部分。

演示：

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 2px;
  height: 100vh;
  padding: 5px;
  margin: 0;
  box-sizing: border-box;
}

grid-item {
  background-color: lightgreen;
  background-clip: content-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 3px;
}

grid-item[data-class="new"]:before {
  content: attr(data-class);
  position: absolute;
  font-size: 2vmax; /* update font-size */
  top: 0.4em;
  left: -1.3em;
  padding: 0em 1.5em;
  transform: rotate(315deg);
  background-color:gold;
  /* eventually add some shadow effects */
  background-image: 
  linear-gradient(135deg, black 0.9em, transparent 1.15em), 
  linear-gradient(-135deg, black 0.9em, transparent 1.15em);
  box-shadow: 0 0 3px;
}

<grid-item>see</grid-item>
<grid-item>full</grid-item>
<grid-item>page</grid-item>
<grid-item>then</grid-item>
<grid-item data-class="new">RESIZE</grid-item>
<grid-item>window</grid-item>
<grid-item>to</grid-item>
<grid-item>see</grid-item>
<grid-item>ribbon</grid-item>
<grid-item data-class="new">font&size</grid-item>
<grid-item>updates</grid-item>
<grid-item>F</grid-item>
<grid-item data-class="new">PRO</grid-item>
<grid-item>B</grid-item>
<grid-item>C</grid-item>
<grid-item>D</grid-item>
<grid-item>E</grid-item>
<grid-item>F</grid-item>
<grid-item>A</grid-item>
<grid-item>B</grid-item>

CSS Grid，将绝对定位为css网格项中的元素：不可能

4 个答案: