Question

我把我的图像放在一张桌子上，但它们在移动屏幕上显示出真正的挤压或相距很远的距离，是否有任何编码可以使它们处于垂直线上？

<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%;
 }
}

Answer 1

在这种情况下，我更喜欢通过将其显示为块来更改表行为。

＆＃13;

@media screen and (min-width: 480px) {
  body img {
    max-width: 100%;
  }
  .product table,
  .product tr,
  .ptoduct td {
    display: block;
  }
  
}

＆＃13;

所以你将它们放在垂直线上。您还应该在图像上使用max-width。如果你的身体宽度任何地方都有一个16px的facebook图标，那么在480设备上100％就会很糟糕。

如何使图像显示在移动屏幕上的列表中？

1 个答案: