0

好吧，据我所知，我在这里提出的问题似乎没有一个可以轻松通过 Google 搜索的解决方案。也许我只是在搜索和/或不了解我在看/在做什么，但我真的找不到任何东西。

这基本上是适合移动设备的电子邮件模板的结构。为了让所有内容在移动设备上查看时变成单列，所有内容都需要收集到表格中。不幸的是，众所周知，桌子不会自然地伸展到邻居的高度。下面的内容他们可以很明显的往下推，但是邻居却比不上。

显然，在正常结构下，这可以通过在 TR 内将所有内容构建为 TD 来解决，但我向您展示的结构是强制性的，并且需要很长时间才能成为它的样子。在这方面我没有太多灵活的空间（至少就我的上级而言），但如果解决方案需要进行一些密集的重组，我肯定会尝试看看如何让它发挥作用。

非常感谢任何输入，解决方案将获得一千金克鲁格朗的奖励。

代码示例如下，更完整的示例在这里。

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>

<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;">
<tr >
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%;  border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;">
<tr >

<!-- CONTENT -->
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;">

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>

<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0"  valign="top" style="width: 50%; background-color: transparent; vertical-align: top; clear: left;" align="left">
<tr >
<td  valign="top" style="width: 100%;  border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0"  style="width: 100%; vertical-align: top; background-color: #0e616d; " >
<tr >

<!-- CONTENT -->
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;">

<p style="margin: 0px; text-align: center; font-size: 72px;  font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">LONG</p>
<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">I'm dragging out this sentence so that I can provide a good example that properly illustrates the issue I'm having. I've also upped the font size because I really shouldn't be making this example so elaborate, but I'm kinda having fun.</p>

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>




<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0"  valign="top" style="width: 50%; background-color: transparent; vertical-align: top;   " align="left">
<tr >
<td  valign="top" style="width: 100%;  border: 0; vertical-align: top; padding: 10px;" > 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0"  style="width: 100%; vertical-align: top; background-color: #0e616d; " >
<tr >

<!-- CONTENT -->
<td style="padding: 10px; vertical-align: top; margin:0px; font-family: Tahoma, Geneva, sans-serif; color: #005c5b;">

<p style="margin: 0px; text-align: center; font-size: 72px;  font-family: Tahoma, Geneva, sans-serif; color: #24ccca; font-weight: bold;">SHORT</p>

<p style="margin: 0px; text-align: center; font-size: 16px; color: #fff;">See the column to the left for an explanation for why this column is so dang short.</p>

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>


<!-- COLUMN -->
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; background-color: transparent;">
<tr >
<td border="0" cellpadding="0" cellspacing="0" style="width: 100%;  border: 0; padding: 0px; margin: 0px"> 

<!-- CONTENT WRAPPER -->    
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; vertical-align: top; background-color: #000;">
<tr >

<!-- CONTENT -->
<td border="0" cellpadding="0" cellspacing="0" style="padding: 0px; vertical-align: top; margin:0px;">

<!-- CONTENT CLOSE -->              
</td>
<!-- CONTENT WRAPPER CLOSE -->        
</tr>
</table>
<!-- COLUMN CLOSE -->       
</td>
</tr>
</table>



</td>
</tr>
</table>
</div>
4

1 回答 1

0

正如我所看到的，您正在制作电子邮件模板。如果我是对的，最好的解决方案是创建适当的表，因此不要在表中嵌套表，而是尝试使用带有 colspans 和 rowspans 的单个表来解决它：

<table>
<tr>
    <td colspan=4>cell</td>
  </tr>
  <tr>
    <td colspan=2>cell</td>
    <td colspan=2>cell</td>
  </tr>
  <tr>
    <td colspan=4>
    <table>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
  </tr>
</table>

还有一些CSS：

table {
  border-spacing: 2px;
}
td {
  background: #999;
  text-align: center;
}

table table {
  width: 100%;
  border-spacing: 2px;
}
table table td {
  width: 33%;
}

你只需要正确地设计它，它应该没问题。

工作示例

更新：嗯，也许它不是完全单张桌子，但它有适当的结构。

于 2013-03-18T15:20:05.163 回答