一些元素在添加功能标签时浮动-CSS

由 发布于

Following is my code which is working fine, but ones I am adding featured tag to the list the last element (4n) is floating down, though in 3rd list item its displaying correctly. Let me know what I am doing wrong here.

代码-

* { 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>