Question

所以我有这些表，我试图为电子邮件模板制作，这三个列有一个浮动属性，以便在我调整窗口大小时将它们堆叠成另一个。

事情是，虽然它在最大尺寸和最小尺寸上看起来很好（最多它们彼此相邻，但至少它们是另一个，如预期的那样），在第三列之间移动到第一列之下第二列保持在第一列的旁边，并且在进一步调整第二列的大小之后，然后将其更改为位于第一列下方，并且第三列进一步远离第二列。我想知道的是，如果有一种方法可以使它们以某种顺序移动，就像第一个移动到下面的那个应该是第二列，并且只有在第三列之后。或者更好的是，如果他们一下子全部动了！

另外，我非常好奇为什么当我给它们浮动属性时文本在单元格中向上移动，我更喜欢它们在中心保持垂直对齐，就像它们在浮动之前一样。

注意：因为这是用于电子邮件，我必须使用我所有的css样式内联，因为我使用的服务器无法识别样式标记。此表的最大宽度为600px

 mkdir(getcwd() . '/public/profile/usr'.$user->getId(), 0777, true);
 mkdir(getcwd() . '/public/profile/usr'.$user->getId() . '/patients', 0777, true);
 mkdir(getcwd() . '/public/profile/usr'.$user->getId() . '/picture', 0777, true);

Answer 1

您需要将表格单元格项目（占位符，链接和按钮）括在不同的Html中。

请参阅/尝试以下代码：

<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
   <tbody>
      <tr>
        <td>
          <div style="width:180px;display:inline-block" class="placeholder">Description:</div>
          <div style="display:inline-block">
            <div style="width:275px;display:inline-block" class="links"><a href="#" target="_blank">very long link</a></div>
            <div style="width=85px;display:inline-block" class="buttons"><a href="#" target="_blank" "="">button</a></div>
          </div>
       </td>
     </tr>
   </tbody>
 </table>

项目位于一个表格单元格中，因此该表格具有一列，宽度相同。

描述项包含在div中，显示：inline-block。链接和按钮都包含在另一个带有display：inline-block。

的div中

当您调整窗口大小时，第二个div（包含链接和按钮）将第二行中的链接和按钮包裹起来。

如果表中有更多列，则需要以这种方式包含所有列。

如何控制窗口中元素浮动窗口大小的顺序

1 个答案: