Question

在调整浏览器窗口大小时，我无法弄清楚如何在div中获取四个图像来调整大小。现在，当浏览器窗口变得太小时，左边的最后一个图像移动到下一行，我不想发生这种情况。我希望图像保持一排。我在这里和其他地方看过很多建议，并尝试过，我无法弄明白！可能有必要知道我所有图像的最大宽度为24％，因为原始图像对我来说太大了。此外，我在页面的整个主体周围有一个div来设置主体的最大宽度为1900px，最小宽度为700px。以下是相关代码：

HTML：

<br>
<div id="contain">
<img src="webphoto6.jpg" alt="Mary" class="one">
<img src="webphoto3.jpg" alt="Mary" class="two">
<img src="webphoto42.jpg" alt="Mary" class="three">
<img src="WebPhoto.jpg" alt="Mary" class="four">
</div>
<div id="clearfix">
<br>

CSS：

#contain { max-width: 1900px; 
min-width: 780px;
display: block; 
}
img { width: auto;
height: auto;
width: auto\9; 
}
.one {float: left;
max-width: 24%;
max-height: auto;
padding-right:20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px; 
}
.two {float: left;
max-width: 24%;
max-height: auto;
padding-right: 20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px; 
}
.three { float: left;
max-width: 24%;
max-height: auto;
padding-right: 20px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px; 
}
.four {float: left;
max-width: 24%;
max-height: auto;
padding: 0px; 
margin: 0px;
}
#clearfix {clear: both;}

我很感激帮助！

Answer 1

我认为问题是20px的固定填充。也可以尝试使用百分比，例如填充：0.24％

如何在div元素中获取浮动图像行以使用浏览器窗口调整大小

1 个答案: