在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;
}
}
我解决了我的问题。我不得不重置旧的第n个子代码像这样:
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;
}
}