SOURCE

<div class="select">
  <span>
    沪浙川渝
  </span>
  <div>
    <a href="">
      上一个赛区
    </a>
    <a href="">
      下一个赛区
    </a>
  </div>
</div>
<hr style="opacity:0.3">
<div class="display">
  <div class="child">
    <img src="https://unsplash.it/100/100?image=1" alt="" />
    <div>
      <span>
        作品名作品名作品
      </span>
      <span>
        名字D
      </span>
      <span>
        <span>
          能量XXX群
        </span>
        /
        <span>
          000号
        </span>
      </span>
    </div>
    <span>
      >
    </span>
  </div>
  <div class="child">
    <img src="https://unsplash.it/100/100?image=2" alt="" />
    <div>
      <span>
        作品名作品名作品
      </span>
      <span>
        名字A
      </span>
      <span>
        <span>
          能量XXX群
        </span>
        /
        <span>
          000号
        </span>
      </span>
    </div>
    <span>
      >
    </span>
  </div>
  <div class="child">
    <img src="https://unsplash.it/100/100?image=3" alt="" />
    <div>
      <span>
        作品名作品名作品
      </span>
      <span>
        名字B
      </span>
      <span>
        <span>
          能量XXX群
        </span>
        /
        <span>
          000号
        </span>
      </span>
    </div>
    <span>
      >
    </span>
  </div>
  <div class="child">
    <img src="https://unsplash.it/100/100?image=4" alt="" />
    <div>
      <span>
        作品名作品名作品
      </span>
      <span>
        名字C
      </span>
      <span>
        <span>
          能量XXX群
        </span>
        /
        <span>
          000号
        </span>
      </span>
    </div>
    <span>
      >
    </span>
  </div>
</div>

body {
  color: rgba(0, 0, 0, 0.9);
  font-size: 15px;
  line-height: 1.5;
  background: #f2f2f2;
  font-family: poppin, Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
  margin: 0;
  padding: 0;
}

.select {
  width: 100%;
  display: flex;
  background: #fff;
  justify-content: space-around;
  color: rgba(0, 0, 0, 0.9);
  margin: 18px 0;
}

.select>* {
  margin: 10px;
}

.select>div>a {
  color: #999;
  margin: 0 3px;
  text-decoration: none;
}

.child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:#fff;
  width:98%;
  margin: 18px 1%;
  border-radius:6px;
}
.child>img{
  padding:9px;
}
.child>div {
  display: flex;
  flex-grow: 8;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding: 0 18px;
}

.child>div>span:first-child {
  font-size: 1.2rem;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.9);
}

.child>div>span:nth-of-type(2) {
  background: #e3bd8d;
  width: 30%;
  color: #fff;
  padding: 0 3px;
}

.child>div>span:last-child {
  font-size: 0.9rem;
  color: #999;
}

.child>div>span:first-child {
  font-size: 1.2rem;
  font-weight: bold;
}
.child>div>span{
  padding:18px 0;
}
.child>span {
  font-size: 1.5rem;
  padding: 0 9px;
}