Question

我在一行中有两行包含3 li我要在reponsive 2中li 但它不是骗子 PS：用于电子邮件HTML

演示

http://jsbin.com/fobejarexi/3/edit?html,css,output

所以结果应该在小屏幕上看起来像这样。

image   image

image   image

image   image

Answer 1

如评论所述，如果是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>

Answer 2

这里有一个清理过的代码片段，用于在移动设备上移动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应用程序上看起来还不错。

CSS响应中的两列

2 个答案: