图像在html上左右摆放

时间：2017-09-20 10:44:16

标签： html image html-table

我正在编辑一个只使用760个宽度图像的表格。 现在我需要并排放置2x 380宽度的图像，但它没有用完。有人可以帮忙吗？非常感谢！

我强调了评论“我在这里遇到麻烦”的部分。请检查。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
   <tbody>
      <tr>
        <td align="center"><!-- Header -->
         <table border="0" cellpadding="0" cellspacing="0" width="760">
            <tbody>
               <tr>
                  <td align="center">
                  <p style="color: #f4f4f4;font-size:1px;">Hello
                  </p>

                  <p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><a href="http://www*********" style="color:#777777" target="_blank">Online version</a> 
                  </p>
                  </td>
               </tr>
            </tbody>
         </table>

         <table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
            <tbody>
               <tr>
                  <td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
                                 </tr>
            </tbody>
         </table>
         <!-- End Header-->

         <table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
            <tbody><!-- Main -->
               <tr>
                  <td align="center" colspan="2">
                  <table align="center" border="0" cellpadding="0" cellspacing="0">
                     <tbody>
                        <tr>
                           <td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
                        </tr>
                        <tr>
                           <td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
                        </tr>
                        <tr>
                           <td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
                        </tr>

<!--I'M HAVING TROUBLE HERE-->


                        <tr>
                           <td align="left"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a></td>
                        </tr>
                        <tr>
                           <td align="right"><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
                        </tr>
                                             </tbody>
                  </table>
                  </td>
               </tr>
               <!-- End -->
            </tbody>
         </table>


           <!-- Unsubscribe to anti cancer foundation -->

         <table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
            <tbody>
              <tr>
                <td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
                  <center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
                  <p style="margin:0;color:#444">
																<br>
																**************</span><br>
																<br>
																<a href="*******************</a>
                  </p>
                  </center>
                 </td>
</tr>
            </tbody>
         </table>
         <!-- Donations --></td>
      </tr>
   </tbody>
</table>


<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
   <tbody>
      <tr>
         <td align="center">
         <p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
		  <br>************</br><br>**************</br><br>***********</br><br>***********</br><br><a href="**************">***************</a></br><br><a href=".***********">***************</a></br>

         </p>
         </td>
      </tr>
         </tbody>
</table>
</body>
</html>

此外，如果您发现完全没必要的东西，请同时删除。 我很确定整个代码可以缩短。

1 个答案:

答案 0 :(得分：0)

使用tr，td如下并排图像

<tr>
     <td><img style="float:left;width:380px" ><img style="float:right;width:380px"></td>
</tr>

 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
   <tbody>
      <tr>
        <td align="center"><!-- Header -->
         <table border="0" cellpadding="0" cellspacing="0" width="760">
            <tbody>
               <tr>
                  <td align="center">
                  <p style="color: #f4f4f4;font-size:1px;">Hello
                  </p>

                  <p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><a href="http://www*********" style="color:#777777" target="_blank">Online version</a> 
                  </p>
                  </td>
               </tr>
            </tbody>
         </table>

         <table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
            <tbody>
               <tr>
                  <td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
                                 </tr>
            </tbody>
         </table>
         <!-- End Header-->

         <table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
            <tbody><!-- Main -->
               <tr>
                  <td align="center" colspan="2">
                  <table align="center" border="0" cellpadding="0" cellspacing="0">
                     <tbody>
                        <tr>
                           <td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
                        </tr>
                        <tr>
                           <td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
                        </tr>
                        <tr>
                           <td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
                        </tr>

<!--I'M HAVING TROUBLE HERE-->


                        <tr>
                           <td align="center"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" style="float:left;width:380px" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" style="float:right;width:380px" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
                       
                     
                        </tr>
                                             </tbody>
                  </table>
                  </td>
               </tr>
               <!-- End -->
            </tbody>
         </table>


           <!-- Unsubscribe to anti cancer foundation -->

         <table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
            <tbody>
              <tr>
                <td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
                  <center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
                  <p style="margin:0;color:#444">
																<br>
																**************</span><br>
																<br>
																<a href="*******************</a>
                  </p>
                  </center>
                 </td>
</tr>
            </tbody>
         </table>
         <!-- Donations --></td>
      </tr>
   </tbody>
</table>


<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
   <tbody>
      <tr>
         <td align="center">
         <p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
		  <br>************</br><br>**************</br><br>***********</br><br>***********</br><br><a href="**************">***************</a></br><br><a href=".***********">***************</a></br>

         </p>
         </td>
      </tr>
         </tbody>
</table>
</body>
</html>
相关问题
最新问题