0

さて、私が知る限り、私がここで提起している問題は、簡単にグーグルできる解決策を持っていないように見える問題です。たぶん、私は自分の検索をばかにしたり、自分が見ていることやしていることを理解していないだけなのかもしれませんが、実際には何も見つかりませんでした。

これは基本的に、モバイルフレンドリーなメールテンプレートの構造です。モバイルデバイスで表示したときにすべてのコンテンツを単一列にできるようにするには、すべてをテーブルに収集する必要があります。残念ながら、ご存知のように、テーブルは自然に隣のテーブルの高さまで伸びません。彼らは明らかに以下のコンテンツを押し下げることができますが、隣人はそれに一致することができません。

明らかに、通常の構造では、これはすべてをTR内のTDとして構築することで解決されますが、私が示している構造は必須であり、それが何であるかになるまでに長い時間がかかりました。私はこれに柔軟に対応する余地はあまりありませんが（少なくとも私の高官が行く限り）、ソリューションに集中的なリストラが必要な場合は、それを機能させる方法を確実に試してみます。

どんな入力でも深く感謝されます、そして、解決策は千の金のKrugerandsで報われるでしょう。

コードサンプルは以下にあり、より完全な例はここにあります。

<!-- 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 に答える