圖片在HTML上並排
[英]Images side to side on html
問題描述
我正在編輯僅使用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 個解決方案
解決方案1
0 已采納 2017-09-20 11:15:56
如下使用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>
在html中並排對齊圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.