一些元素在添加特色标签时下浮 - CSS

【问题标题】：Some elements floating down on adding featured tag - CSS一些元素在添加特色标签时下浮 - CSS
【发布时间】：2020-09-10 12:25:43
【问题描述】：

以下是我运行良好的代码，但是我在列表中添加了“特色”标签（.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>

错误截图 -

【问题讨论】：

  • 这里有什么问题？
  • 您能否添加您的问题的屏幕截图？很难弄清楚。
  • @sunjeep ：检查，我添加了截图

标签： html css flexbox css-selectors


【解决方案1】：

使用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; }
<div class="container">
  <div class="list">
    <div class="list-item note">
      <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 note">
      <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>
    <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="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>

【讨论】：

    【解决方案2】：

    在第三个list-item 中，.note DIV 是第一个.box DIV 的子，在另一个.box DIV 中，.note DIV 是兄弟 .box 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 {
  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="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>
    <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="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 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>

    【讨论】：

    • 奇怪..我认为第 1 和第 6 在语义上更正确..您的意见是什么？
    • 是的，语义上它们是，但是你必须找到另一个 CSS 选择器（可能使用额外的类）
    猜你喜欢
    • 1970-01-01
    • 2013-12-04
    • 2016-12-22
    • 2017-05-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode