我的图片放在表格中，但它们在移动屏幕上显示时真的挤在一起或分开得很远，是否有任何编码可以让它们在一条垂直线上？
<body>
<div class="product">
<center><table id="table2">
<tr>
<td><img src="lipgloss1.png" height="300" width="200"></td>
<td><img src="lipgloss2.png" height="300" width="200"></td>
<td><img src="lipgloss3.png" height="300" width="200"></td>
</tr>
<tr>
<td><p>Peridot Green - $3.99</p></td>
<td><p>Pearl White - $3.99</p></td>
<td><p>Amethyst Purple - $3.99</p></td>
</tr>
</table>
</body>
这是CSS
.product {
background-color: white;
margin-left: 3em;
margin-right: 3em;
padding: 2em;
}
@media screen and (min-width: 480px) {
body img {
width: 100%;
}
}
最佳答案
在这种情况下，我更愿意通过将其显示为 block 来更改表的行为。
@media screen and (min-width: 480px) {
body img {
max-width: 100%;
}
.product table,
.product tr,
.ptoduct td {
display: block;
}
} 因此您会将它们排成一条垂直线。您还应该在图像上使用最大宽度。如果你有一个 16px 的 facebook 图标在你 body 宽度的任何地方，在 480 设备上 100% 会很糟糕。
关于css - 如何让图片出现在手机屏幕的列表中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34844897/