Question

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

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

<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/>

如您所见，三幅图像均为298像素宽。当我在笔记本电脑上观看时，所有三个都在一排。当我在其他机器上查看时，有时第三张图像在新行上。

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

我的问题：在计算机上查看时，确保所有三个图像保持在一行的正确方法是什么？据我所知，在手机上查看时，每张图片可能都必须排成一排。必须有一种标准的方法来处理这个问题。我是以％而不是像素来指定对象的宽度吗？

感谢任何帮助。

Answer 1

这种情况正在发生，因为您使用的是固定大小的图像，而不是使用允许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>

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

1 个答案: