html - 移动 html 中的响应式两列

Question

我正在尝试在移动设备的两列中设置两张图片，但不管用怎么办？

Demo here

HTML

 <table bgcolor="#ffffff" id="event-info" class="outer-table"
     summary="outer-table"  valign="top" border="0" cellpadding="0" cellspacing="0" style="background-color:#ffffff; width:100%; max-width:600px; Margin:0 auto" width="100%">
                  <tr align="center" class="tab1">
                     <td>
                        <img src="images/website.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                        font-size: 12px;padding-top: 10px;font-weight: 700;">Website</p>
                      </td>
                       <td>
                        <img src="images/mobile.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                        font-size: 12px;padding-top: 10px;font-weight: 700;">Mobile</p>
                      </td>
                       <td>
                        <img src="images/marketing.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                        font-size: 12px;padding-top: 10px;font-weight: 700;">Marketing</p>
                      </td>
                     </tr>
                         <tr align="center"  class="tab2">
                     <td>
                        <img src="images/support.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                        font-size: 12px;padding-top: 10px;font-weight: 700;">Support</p>
                      </td>
                       <td>
                        <img src="images/management.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                            font-size: 12px;padding-top: 10px;font-weight: 700;">Management</p>
                      </td>
                       <td>
                        <img src="images/customer.png" class="features" border="0" width="600" style="width:30%;max-width:600px;">
                        <p class="features" border="0" width="600" style="width:35%;max-width:600px;
                        font-size: 12px;padding-top: 10px;font-weight: 700;">Customer</p>
                      </td>
                      <tr class="spacer-40" height="40" style="height:55px; padding: 0 !important; margin: 0 !important; font-size: 0 !important; line-height: 0 !important;">
                        <td>&nbsp;</td>
                      </tr>
                     </tr>
    </table>

CSS

@media only screen and (max-width: 769px){  
    table tr td{
                  display:block;
                }


 }

Answer 1

根据评论更新

由于您无法将表格从 3 列布局切换为 2 列布局(至少不能以正确的方式)并且一半的电子邮件客户端不支持媒体查询，因此我想出了这个解决方案。

使用电子邮件客户端对其进行彻底测试，因为我无法做到这一点

我添加了 min-width: 100px;到“制表符”div，当空间不足时，它会分成 1 列。如果您不想要，请将其删除。

<div style="max-width:600px;margin:0 auto;text-align: center;">
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
  <div style="display:inline-block;text-align:center;width:calc(100% - 4px);max-width:150px;min-width: 100px;">
    <img src="images/website.png" style="border:0;width:30%;">
    <p style="font-size:12px;padding-top:10px;font-weight:bold;text-align:center;">Website</p>
  </div>
</div>

因为使用 table 无法正确完成此操作, 这是一个 flex解决方案。

.outer {
  max-width:600px;
  margin:0 auto;
  display: flex;
  flex-wrap: wrap;
}
.outer .tab1 {
  width: 33%;
  text-align: center;
}
.outer img.features {
  border:0;
  width:30%;
  max-width:600px;
}
.outer p.features {
  max-width:600px;
  font-size: 12px;
  padding-top: 10px;
  font-weight: 700;
  text-align: center;  
}
@media only screen and (max-width: 480px){
  .outer .tab1 {
    width: 50%;
  }
}

<div id="event-info" class="outer">
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
</div>

如果flex不能用，用display: inline-block

.outer {
  max-width:600px;
  margin:0 auto;
}
.outer .tab1 {
  display: inline-block;
  text-align: center;
  width: calc(33% - 4px);     /*  4px, see comment below  */
}
.outer img.features {
  border:0;
  width:30%;
  max-width:600px;
}
.outer p.features {
  max-width:600px;
  font-size: 12px;
  padding-top: 10px;
  font-weight: 700;
  text-align: center;  
}
@media only screen and (max-width: 480px){
  .outer .tab1 {
    width: calc(50% - 4px);
  }
}

<div id="event-info" class="outer">
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
  <div class="tab1">
    <img src="images/website.png" class="features">
    <p class="features">Website</p>
  </div>
</div>

<罢工>

旁注:

使用的 4px 是为了补偿空白(标记中元素之间的换行符)并且基于字体大小，因此如果它增加，则可能需要调整此值。

另一种方法是将标记从

更改为

</div>
<div class="tab1">

到

</div><div class="tab1">

或

</div><!--
--><div class="tab1">