列左对齐问题 - 仅限移动

Question

我正在iphone上遇到对齐问题，我的列部分左对齐。它在桌面和Android上运行良好。我不确定是什么问题。谢谢

  .column {
  float: left;
  width: 33%;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media only screen and (max-width:600px) {
  .column {
    float: left;
    width: 33%;
    margin: 0px;
  }
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

<!---- Steps Section ---->
<table border="0" cellspacing="0" cellpadding="0" style="width: 600px; background-color:#ffffff;">
  <tbody>
    <tr>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
      <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
        <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
        </h4>
        <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
          <br /> card ready to go.
        </p>
      </td>
    </tr>
  </tbody>
</table>

我试图让移动设备像桌面一样对齐。现在，只有移动设备上所有3列的右侧都有一个大的灰色空间。

Answer 1

这是您的代码的简化版本。我更改了浮动，宽度并添加了显示到你的column类。

请注意，如果要使用媒体查询覆盖任何内容并且已经存在内联，则需要在CSS中使用!important来执行此操作。

	.column {
        float: left;
      }
@media only screen and (max-width:600px){
        .column {
          float: none !important;
          width: 100% !important;
	  display:inline-block;
          margin: 0px;
        }
}

<!---- Steps Section ---->      
      <table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; background-color:#ffffff;">
        <tbody>
          <tr>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>
            </td>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>              
            </td>
            <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
              <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
              </h4>
              <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                <br />
                card ready to go.
              </p>              
            </td>
          </tr>
        </tbody>
      </table>

或者，如果您想在移动设备中保留所有3列相同的宽度，则可以使用以下代码：

    	.column {
            float: left;
          }
    @media only screen and (max-width:600px){
            .column {
              float: none !important;
              width: 33% !important;
    	  display:inline-block;
              margin: 0px;
            }
    }

    <!---- Steps Section ---->      
          <table border="0" cellspacing="0" cellpadding="0" style="max-width: 600px; background-color:#ffffff;">
            <tbody>
              <tr>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>
                </td>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>              
                </td>
                <td class="column" border="0" cellpadding="0" cellspacing="0" style="width: 33%;">
                  <h4 style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center;">STEP ONE
                  </h4>
                  <p style="color: #565A5C; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 16px; margin: 0; padding: 0; text-align: center; ">You’ve got your savings
                    <br />
                    card ready to go.
                  </p>              
                </td>
              </tr>
            </tbody>
          </table>

希望这是你追求的答案。

Answer 2

试试这个：

@media only screen and（max-width：600px）{。column {text-align：left！important;}}

此外，:after在大多数电子邮件客户端中不起作用。如果你将它用于主要的css结构元素，可能需要避免。

祝好运。