html - 处理距离其他元素类似的新元素 CSS

Question

当我想要处理一个新元素时，其他元素 将具有与新元素 相似的距离，但只能由 css 处理好吗？如果可能的话，我不想通过添加元素可用的距离来处理，因为这违反了设计...................... ...........................................................

感谢您的帮助!

.list_item_grid {
  padding: 0 7px;
  margin-bottom: 63px;
  list-style: none;
}
.list_item_grid .item {
  float: left;
  width: calc(100%/4 - 2px);
  margin-right: 2px;
  margin-bottom: 7px;
}
.list_item_grid .item:last-child {
  margin-right: 0;
}
.list_item_grid .thumb_img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.list_item_grid img {
  position: absolute;
  width: auto;
  max-height: 100%;
  height: auto;
  border: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list_item_grid a {
  text-decoration: none;
}
.list_item_grid .date {
  padding: 9px 14px 3px;
  color: #7b7b7b;
}
.list_item_grid .txt_link {
  margin-top: 0;
  padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
  text-decoration: none;
  color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
  content: "NEW"
}

<ul class="list_item_grid clearfix">
    <li class="item new">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>

    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
</ul>

Link code

Answer 1

我已经完成了，看看这个

我在这里添加了段落的类名，然后我添加了一些 css 代码。

.list_item_grid {
  padding: 0 7px;
  margin-bottom: 63px;
  list-style: none;
}
.list_item_grid .item {
  float: left;
  width: calc(100%/4 - 2px);
  margin-right: 2px;
  margin-bottom: 7px;
}
.list_item_grid .item:last-child {
  margin-right: 0;
}
.list_item_grid .thumb_img {
  height: 180px;
  position: relative;
  overflow: hidden;
}
.list_item_grid img {
  position: absolute;
  width: auto;
  max-height: 100%;
  height: auto;
  border: none;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.list_item_grid a {
  text-decoration: none;
}
.list_item_grid .date {
  padding: 9px 14px 3px;
  color: #7b7b7b;
}
.list_item_grid .txt_link {
  margin-top: 0;
  padding: 0 22px 0 14px;
}
.list_item_grid a:hover .txt_link {
  text-decoration: none;
  color: #2b7bcd;
}
.list_item_grid li.new > p:first-child:before {
  content: "NEW"
}
 .para{
 height: 20px;
 margin: 0px;
 padding: 15px 0px;
 }

<ul class="list_item_grid clearfix">
    <li class="item new">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>

    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
    
    <li class="item">
      <p class="para"></p>
      <a href="#">
        <div class="thumb_img"><img src="https://placehold.jp/240x180.png" alt=""></div>
        <div class="contents">
          <p class="date">2018/08/03</p>
          <p class="txt_link">abc</p>
        </div>
      </a>
    </li>
</ul>