0

全幅（600px）を占める画像が上にあり、その後に中央で分割された2列の画像が続く電子メールテンプレートのテーブルを設定しようとしています。しかし、何らかの理由で、右の列がテーブルの幅を右に押しすぎています。

JSフィドル： http： //jsfiddle.net/5QEhK/1/ 

<table width="600" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">


    <!--Main Image-->

       <tr align="center" valign="center" width="580px">
           <td align="center" valign="center" width="580px">
               <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
           </td>
       </tr> 



    <!--Two Columns-->
                 <tr>
                    <td valign="top" width="260" class="leftColumnContent">
                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/></a>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>


                    <td valign="top" width="260" class="rightColumnContent">

                        <table border="0" cellpadding="15" cellspacing="0" width="100%">
                            <tr>
                                <td valign="top">
                                    <img style="width: 260px;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
                                </td>
                            </tr>

                        </table>  
                    </td>  
              </tr>  

    </table>​
4

2 に答える 2

2

あなたの最初の問題はあなたがあなたのメイン画像セクションに単一のtdを持っているということですそれはこのようにあるべきcolspan="2" です。

   <!--Main Image-->

   <tr align="center" valign="center" width="580">
       <td align="center" valign="center" colspan="2">
           <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png" width="570px">
       </td>
   </tr>

次に、問題ではありませんが、width値が「px」の属性を持つのは誤りです。

幅が属性として来る場合は、「px」なしで使用する必要があります。幅がcssスタイルとして来る場合は、「px」、「em」、「pt」などの測定単位が必要です。

このデモをチェックしてください

于 2012-11-01T18:26:47.173 に答える
1

このコードを試してください

いくつかのスタイルを削除しましたが、元に戻すことができます。理想的には、この種の要件にはcolspanを使用する必要があります。

<table width="600px" style="border: 1px solid #b8b7b7;margin-bottom: 10px;">
<!--Main Image-->

<tr>
   <td colspan="2" valign="center">
       <img border="0" style="padding: 0;margin: 0;" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/eye_on_design.png">
   </td>
</tr>

<!--Two Columns-->
<tr>
  <td valign="top" width="50%" class="leftColumnContent"> 
    <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_left.png" mc:label="image"/>
  </td>
  <td valign="top" width="50%" class="rightColumnContent">
      <img style="" src="http://homeplan.com/newsletter/October/10:29%20Newsletter/img/top_right.png" mc:label="image" mc:edit="tiwc300_image01" /></a>
  </td>  
</tr>              
</table>
于 2012-11-01T18:38:50.230 に答える