我在一行中有两行包含3 li我要在reponsive 2中li
但它不是骗子
PS：用于电子邮件HTML
演示
http://jsbin.com/fobejarexi/3/edit?html,css,output
所以结果应该在小屏幕上看起来像这样。
image image
image image
image image
答案 0 :(得分：0)
如评论所述，如果是HTML电子邮件，则需要<table> s 而不是<li>。我在下面加了一些代码来实现你的要求。
一个警告：为简单起见，这仅适用于支持@media查询的移动电子邮件客户端。因此，这适用于iOS Mail，但不适用于移动版Gmail。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
@media (max-width: 600px) {
.table {
width: 100% !important;
}
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="width: 600px;" class="table">
<tr>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=1"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=2"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=3"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=4"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=5"></td>
<td style="display: block; float: left; line-height: 0;" class="td"><img src="http://placehold.it/200x200&text=6"></td>
</tr>
</table>
</body>
</html>
答案 1 :(得分：0)
这里有一个清理过的代码片段，用于在移动设备上移动2行3到3行2，这适用于所有平台，即使他们不支持媒体查询：
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 94%; max-width: 615px;">
<tr><td style="text-align: center; font-size: 0; padding: 15px 0 0px 0;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr><td width="200" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="200" valign="top" style="vertical-align: top;">
<![endif]-->
<div style="width: 50%; max-width: 205px; display: inline-block; vertical-align: top; margin-bottom: 15px;">
<table cellpadding="0" cellspacing="0" border="0" width="188" align="center" bgcolor="#ffffff" style="max-width: 92%;" class="wrapper2">
<tr><td align="center">
<img alt="" border="0" src="http://placehold.it/188x220" style="border: 0; display: block;" class="gridimg" /></a>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
<![endif]-->
</table>
</td>
</tr>
</table>
你需要通过一些类来增强它，以帮助它在iPhone和旧版Androids上看起来更好，但它在Gmail应用程序上看起来还不错。