最后一个孩子不工作 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;
}

Answer 2

将缺少的结束 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> <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> <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> <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>