Question

这是一个包含多个span元素的div。

<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      .content{
        border: 1px solid gray;
        width: 250px; 
        padding: 5px; 
      }

      .name{                
        font-size: 18px;
        font-weight: 600;
        color: #efa520;
        padding: 2px;
      }

      .address{
        padding: 2px;
        color: #c14a1b;
      }

      .date{
        padding: 2px;
        color: #a78919;
      }

      .ids{
        padding: 2px;
        color: #1b8ac1;            
      }

    </style>

  </head>
  <body>

    <div class="content">
      <span class="name">Christopher Brown</span><br>
      <span class="address">Washington</span><br>
      <span class="date">01/11/1987</span><br>
      <span class="ids">203459867</span><br>
    </div>


  </body>
</html>

我想要只使用CSS在第一个跨度前面（即在div的右上角）出现类名'.ids'的最后一个跨度。在不更改或添加任何HTML元素的情况下，我希望进行此更改。但是，如果有必要，您只能删除<br> HTML元素，但保持与现在显示的结构相同的结构。

Answer 1

我会使用order的flex布局。显然，删除<br>或不显示任何内容。

.content {
  display: flex;
  flex-direction: column;
}
.ids {
  order: -1;
}
.name {
  order: -2;
}

<强>段

.content {
  border: 1px solid gray;
  width: 250px;
  padding: 5px;
}
.name {
  font-size: 18px;
  font-weight: 600;
  color: #efa520;
  padding: 2px;
}
.address {
  padding: 2px;
  color: #c14a1b;
}
.date {
  padding: 2px;
  color: #a78919;
}
.ids {
  padding: 2px;
  color: #1b8ac1;
}
.content {
  display: flex;
  flex-direction: column;
}
.ids {
  order: -1;
}
.name {
  order: -2;
}

<div class="content">
  <span class="name">Christopher Brown</span>
  <span class="address">Washington</span>
  <span class="date">01/11/1987</span>
  <span class="ids">203459867</span>
</div>

预览

将样式应用于跨度以在特定位置显示它

1 个答案: