Image 在不同设备上保持页面外观一致

我是第一次建立一个网站。我有一个关于页面如何在不同设备上显示的基本问题

我有三行，每行包含一个图像，例如：

<div class="img_box"><img src="1.png" class="prod_img" border=0 height = 343 width = 298/>

<div class="img_box"><img src="2.png" class="prod_img" border=0 height = 343 width = 298/>

<div class="img_box"><img src="3.png" class="prod_img" border=0 height = 343 width = 298/>

如您所见，这三幅图像的宽度均为298px。当我在笔记本电脑上查看时，所有三个都放在一排。当我在其他机器上查看时，有时第三个图像位于新行

这对我来说是有意义的，因为我猜其他机器上的屏幕分辨率较低

我的问题：在计算机上查看时，确保所有三个图像保持在一行的正确方法是什么？我知道，在手机上观看时，每张图片可能都必须是一排独立的。必须有一个标准的方法来处理这个问题。我是否以%而不是像素表示对象的宽度

---

感谢您的帮助。

这是因为您使用的是固定大小的图像，而不是使用CSS和用于查看网页的设备允许的百分比来调整图像大小

目前，您的图像总宽度为896px，这不包括您在CSS中添加的任何填充。因此，小于此数字的设备或窗口将导致多个换行。要克服前面提到的问题，您需要使用百分比

下面是一个示例，演示了如何采用前一个字符的宽度而不是像素的宽度

/* CSS */

.image-container {
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
.image-container img {
    padding: 4px;
    width: 100%;
    float: right;
}
.image-container.two img {
    width: 50%;
}
.image-container.three img {
    width: 33.33%;
}
.image-container.four img {
    width: 25%;
}

<!-- HTML -->

<!-- 1 image -->
<div class="image-container">
    <img src="1.png" alt="Image Description 1">
</div>

<!-- 2 images -->
<div class="image-container two">
    <img src="1.png" alt="Image Description 1">
    <img src="2.png" alt="Image Description 2">
</div>

<!-- 3 images -->
<div class="image-container three">
    <img src="1.png" alt="Image Description 1">
    <img src="2.png" alt="Image Description 2">
    <img src="3.png" alt="Image Description 3">
</div>

<!-- 4 images -->
<div class="image-container four">
    <img src="1.png" alt="Image Description 1">
    <img src="2.png" alt="Image Description 2">
    <img src="3.png" alt="Image Description 3">
    <img src="4.png" alt="Image Description 4">
</div>

/*CSS*/
.图像容器{
宽度：100%；
填充：0；
保证金：0自动；
}
.图像容器img{
填充：4px；
宽度：100%；
浮动：对；
}
.image-container.two-img{
宽度：50%；
}
.image-container.three-img{
宽度：33.33%；
}
.image-container.4img{
宽度：25%；
}