某些元素在添加功能标签时浮出水面-CSS

Question

以下是我的代码，它工作正常，但是我在列表中添加了“功能”标签（类.note），最后一个元素（4n）向下浮动，尽管在第三个列表项中其显示正确。让我知道我在这里做错了。

代码-

* { box-sizing: border-box; }
.container { display: flex; background: #EEEEEE; padding: 10px; }
.list { display: flex; flex-direction: column; width: 100%; }
.list-item { background: #FFFFFF; margin-bottom: 10px; width: 100%; display: flex; flex-wrap: wrap; padding: 20px; position: relative; }
.box { width: 25%; }
.box:nth-child(4n+5) { padding-top: 5px; }
.box:nth-child(4n+6) { padding-top: 5px; }
.box:nth-child(4n+7) { padding-top: 5px; }
.box:nth-child(4n+8) { padding-top: 5px; }
.header {font-weight: bold; }
.note { position: absolute; top: 0; background: red; color: #FFFFFF;  padding: 2px 10px; left: 0; }

<div class="container">
  <div class="list">
    <div class="list-item">
      <div class="note">Featured</div>
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="note">Featured</div>
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
    </div>
    <div class="list-item">
      <div class="note">Featured</div>
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
      <div class="box">
        <div class="header">Header 9</div>
        <div class="content">Content 9</div>
      </div>
    </div>
  </div>
</div>

错误屏幕截图-

Answer 1

子，在其他.box DIV中，.note DIV是[[同级]] C0] DIV。更改所有内容，使其与第三个相同。

.box

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  background: #EEEEEE;
  padding: 10px;
}

.list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.list-item {
  background: #FFFFFF;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
  position: relative;
}

.box {
  width: 25%;
}

.box:nth-child(4n+5) {
  padding-top: 5px;
}

.box:nth-child(4n+6) {
  padding-top: 5px;
}

.box:nth-child(4n+7) {
  padding-top: 5px;
}

.box:nth-child(4n+8) {
  padding-top: 5px;
}

.header {
  font-weight: bold;
}

.note {
  position: absolute;
  top: 0;
  background: red;
  color: #FFFFFF;
  padding: 2px 10px;
  left: 0;
}

Answer 2

nth-of-type

* { box-sizing: border-box; }
.container { display: flex; background: #EEEEEE; padding: 10px; }
.list { display: flex; flex-direction: column; width: 100%; }
.list-item { background: #FFFFFF; margin-bottom: 10px; width: 100%; display: flex; flex-wrap: wrap; padding: 20px; position: relative; }
.box { width: 25%; }
.box:nth-of-type(4n+5) { padding-top: 5px; }
.box:nth-of-type(4n+6) { padding-top: 5px; }
.box:nth-of-type(4n+7) { padding-top: 5px; }
.box:nth-of-type(4n+8) { padding-top: 5px; }
.header {font-weight: bold; }
.note { position: absolute; top: 0; background: red; color: #FFFFFF;  padding: 2px 10px; left: 0; }

另一个想法是使用伪元素添加功能：

 
<div class="container">
  <div class="list">
    <div class="list-item">
      <span class="note">Featured</span>
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="note">Featured</div>
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
    </div>
    <div class="list-item">
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
    </div>
    <div class="list-item">
      <div class="note">Featured</div>
      <div class="box">
        <div class="header">Header 1</div>
        <div class="content">Content 1</div>
      </div>
      <div class="box">
        <div class="header">Header 2</div>
        <div class="content">Content 2</div>
      </div>
      <div class="box">
        <div class="header">Header 3</div>
        <div class="content">Content 3</div>
      </div>
      <div class="box">
        <div class="header">Header 4</div>
        <div class="content">Content 4</div>
      </div>
      <div class="box">
        <div class="header">Header 5</div>
        <div class="content">Content 5</div>
      </div>
      <div class="box">
        <div class="header">Header 6</div>
        <div class="content">Content 6</div>
      </div>
      <div class="box">
        <div class="header">Header 7</div>
        <div class="content">Content 7</div>
      </div>
      <div class="box">
        <div class="header">Header 8</div>
        <div class="content">Content 8</div>
      </div>
      <div class="box">
        <div class="header">Header 9</div>
        <div class="content">Content 9</div>
      </div>
    </div>
  </div>
</div>
* { box-sizing: border-box; }
.container { display: flex; background: #EEEEEE; padding: 10px; }
.list { display: flex; flex-direction: column; width: 100%; }
.list-item { background: #FFFFFF; margin-bottom: 10px; width: 100%; display: flex; flex-wrap: wrap; padding: 20px; position: relative; }
.box { width: 25%; }
.box:nth-child(4n+5) { padding-top: 5px; }
.box:nth-child(4n+6) { padding-top: 5px; }
.box:nth-child(4n+7) { padding-top: 5px; }
.box:nth-child(4n+8) { padding-top: 5px; }
.header {font-weight: bold; }
.note::before {content:"Featured"; position: absolute; top: 0; background: red; color: #FFFFFF;  padding: 2px 10px; left: 0; }