为什么表格行中的图像不会在ios邮件上并排显示?

问题描述 投票:0回答:1

我正在创建一个响应式电子邮件但由于某种原因在移动设备上产品图像应该以两行的形式呈现。当我在浏览器中查看结果时,它会正确呈现,但是当我使用iphone的邮件应用程序查看电子邮件时,图像占据了整行。这是我的代码......

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=shop-favorites-title"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_08_ecb55eee-cc47-4afe-9d13-64b1a3969804.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products/products/ayate-washcloth?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+ayate-washcloth" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_09_b52e842e-e42b-457b-bc61-425877ffc9fd.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/oils/products/tea-tree-oil-1oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+tea-tree-oil" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_10_99954987-88e5-4a04-b472-fdaa04ee8a73.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/organic-apple-cider-vinegar?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+apple-cider-vinegar" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_11_0c43ec27-f8df-4c31-b62c-692542e13eb7.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/garlic-habanero-hot-sauce?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+hot-sauce" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_12_3c9be88e-74fd-456a-93d5-eab583cfc7bd.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/hair/products/body-wash?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+body-wash" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_13_327cfe61-d550-4e93-953d-86e70e51d1ae.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/cleaners/products/surfacecleaner24oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+surface-cleaner" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_14_e81b0711-932c-460c-b716-3b43071e0671.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/extra-virgin-olive-oil?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+extra-virgin-olive-oil" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_15_72a29d34-ac54-442c-ac88-81877daa8183.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/hair/products/shampoo?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+shampoo" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_16_1f847c84-0707-406a-8da9-55d533df4394.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/maple-syrup?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=prodcut+maple-syrup" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_17_ae1c4768-8ca3-4e7b-8f87-e6eb0b018011.jpg?1683" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/cleaners/products/dishsoap16oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=product+dish-soap"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_18_4d4d788e-f129-47c2-a53a-0d705d8f7c35.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=shop-all-button"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_19_76861080-70b8-4205-bc25-bf176ae8bf3a.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=footer"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_20_13a0e89b-2076-4d94-bad7-9e30f7c225e9.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>
&nbsp;

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-shop-favorites-title" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_08_f9a97d46-cf0d-4f53-bfaf-e3b0b863709c.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products/products/ayate-washcloth?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-ayate-washcloth" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_09_55724d89-fc89-4238-8eb2-4ed597c27681.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/oils/products/tea-tree-oil-1oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-tea-tree-oil" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_10_6021824e-3cb5-4ec8-b3e9-a695e5f9660f.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/organic-apple-cider-vinegar?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-apple-cider-vinegar" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_11_98adec15-f602-48f6-a4f3-9d94730c90a2.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/garlic-habanero-hot-sauce?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-hot-sauce" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_12_e0fd0298-7252-4019-9dde-8fcf4c7780ba.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/hair/products/body-wash?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-body-wash" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_13_20f72583-9d20-4243-b4c6-54aaf6ea1903.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/cleaners/products/surfacecleaner24oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-surface-cleaner" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_14_b5acf6b2-f530-4bdf-8e7d-72036474356f.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/extra-virgin-olive-oil?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-extra-virgin-olive-oil" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_15_fbd1957d-e085-4515-861e-09da9ff99a7e.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/hair/products/shampoo?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-shampoo" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_16_f63aae90-47d0-47ab-b991-a279b31e601e.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/condiments/products/maple-syrup?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-maple-syrup" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_17_68ea4411-d816-43e1-9f54-b41a11396339.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/cleaners/products/dishsoap16oz?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-product-dish-soap" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_18_d7954e4b-8571-4fd1-9f3f-e5c08917da81.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-shop-now-button" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_19_aebaf1a6-b8e9-499e-aee3-82e8da6ee422.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-footer" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_20_153f2f5a-ccb0-4cae-8234-cf3defdab72b.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>

<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea;  " width="100%">
	<tbody>
		<tr>
			<td align="center" valign="top"><a href="https://www.publicgoods.com/collections/all-products?utm_source=drip&amp;utm_medium=email&amp;utm_campaign=march-promo&amp;utm_content=mobile-footer" style="text-decoration:none; color:#000000;" target="_blank"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_21_e8638b6a-4df2-4684-a3ed-b3d6a7df9e72.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </a></td>
		</tr>
	</tbody>
</table>
&nbsp;
html css email responsive-design
1个回答
0
投票

这是因为是一个块元素。它将始终使用整个可用宽度。你可以写类似的东西

<a href="..." style="display: inline-block"> IMG </a>
© www.soinside.com 2019 - 2024. All rights reserved.