最后一个孩子没有工作css/html

Question

我想要一排四个div.

.frontpage {
  width: 240px;
  margin-bottom: 20px;
  margin-right: 50px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.frontpage img {
  margin: 10px auto;
}

.frontpage a:last-child img {
  margin-right: 0;
}

<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>

  <div class="frontpage">RETRO
    <br>
    <a href="retro/index.html">
      <img src="images/name1.jpg" alt="">
    </a>
    <p>TEXT</p>
    <div class="readmore"><a href="retro/index.html">READ MORE</a>
    </div>

    <div class="frontpage">RETRO
      <br>
      <a href="retro/index.html">
        <img src="images/name1.jpg" alt="">
      </a>
      <p>TEXT</p>
      <div class="readmore"><a href="retro/index.html">READ MORE</a>
      </div>

      <div class="frontpage">RETRO
        <br>
        <a href="retro/index.html">
          <img src="images/name1.jpg" alt="">
        </a>
        <p>TEXT</p>
        <div class="readmore"><a href="retro/index.html">READ MORE</a>
        </div>

正如你所看到我试图使用last-child来获得最后一个div的0px余量.但我似乎无法摆脱利润.

Answer 1

你必须将选择器移动到.frontpage.

.frontpage:last-child {
  margin-right: 0;
}