媒体查询中的PHP nth-child

时间:2015-03-18 14:16:27

标签: php html css

MyPage上有许多照片。在正常情况下,一行中有6张图片。如果更改浏览器的大小,则每行中的图片数量将会更改。我用媒体查询解决了这个问题。在每一行中,最后一张图片不应该是margin-right: 5px;。但nth-child每次都不会改变它,这就是为什么边距不正确。我错了什么?

这是我的图片的php输出:

<?php
    $sql = "SELECT * FROM bilder";
    $result=mysqli_query($db,$sql);
    while($row=mysqli_fetch_assoc($result)){
        echo "<img class='image' src='$row[bild_pfad]' alt='$row[bild_name]' style='$row[bild_werte]'>";
    } 
?>

这是css:

section{
    margin: 0px auto;
    width: 925px;
    margin-top: 55px;
}

.image{
    object-position: center; /* Center the image within the element */
    height: 150px;
    width: 150px;
    object-fit: cover;
    margin-right: 5px;
}

.image-margin{
    margin-right: 5px;
}

section img:nth-child(6n+6){
    margin-right:0;
}

@media only screen and (max-width : 924px) {
/* Five images in each row */
section{
    margin: 0px auto;
    width: 770px;
    margin-top: 55px;
}
  section img:nth-child(5n+5){
    margin-right:0;
  }
}

@media only screen and (max-width : 770px) {
  /* Four images in each row */
section{
    margin: 0px auto;
    width: 615px;
    margin-top: 55px;
}
  section img:nth-child(4n+4){
    margin-right:0;
  }
}

@media only screen and (max-width : 615px) {
section{
    margin: 0px auto;
    width: 460px;
    margin-top: 55px;
}
      section img:nth-child(3n+3){
    margin-right:0;
  }
}
@media only screen and (max-width : 460px) {
section{
    margin: 0px auto;
    width: 305px;
    margin-top: 55px;
}
      section img:nth-child(2n+2){
    margin-right:0;
  }
}

1 个答案:

答案 0 :(得分:0)

我解决了我的问题。我不得不重置旧的 nth-child代码 像这样:

&#13;
&#13;
section img:nth-child(6n+6){
    margin-right:0;
 }

@media only screen and (max-width : 924px) {
/* Five images in each row */
section{
    margin: 0px auto;
    width: 770px;
    margin-top: 55px;
}
  section img:nth-child(6n+6){
    margin-right:5px;
 }
  
  
  section img:nth-child(5n+5){
    margin-right:0;
  }
}
&#13;
&#13;
&#13;