這是關于一個電子郵件模板，每個表格包含一個專案，右側有圖片，左側有詳細資訊，名稱/品牌名稱/尺寸等。我嘗試了一堆我在網上找到的不同解決方案，但我無法讓結構對所有平臺都具有足夠的回應能力。有關結構的任何資源都是有幫助的。我做了一張圖片來描述結構的樣子。
另一位用戶指出，我可以展示我嘗試過的最后一個模板以及我使用的效果不佳的資源。 https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ?100 </span>
<span style="padding-left:8px"> ????</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>????</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">???</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :???? ?????</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
???? ?????
</div>
</td>
</tr>
</tbody>
</table>并且示例中的條件 VML 在我的測驗中不起作用。 https://stackoverflow.design/email/templates/short-transactional/
uj5u.com熱心網友回復：
這是一種實作影像中所擁有內容的混合方法。我的代碼不依賴于媒體查詢，但我添加了一個類以使我的塊在移動設備中具有 100% 的寬度。如果將其洗掉，則帶有 text3、text2 和 text1 的行將在達到較小的螢屏尺寸時自行開始堆疊。
我沒有放入任何管道/分隔符，因為它們可以在您添加內容時放置。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Untitled Document</title>
<style type="text/css">
/*not smart phones*/
@media only screen and (max-width:480px) {
.fullWidth{width:100% !important;max-width:100% !important;}
}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="700">
<![endif]-->
<!-- start 700 pixel container -->
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0" class="fullWidth" style="max-width:700px;">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="700" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="175">
<![endif]-->
<div style="max-width: 174px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text3</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
<tr>
<td align="center" valign="top" style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px;"><!--[if (gte mso 9)|(IE)]>
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;"></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text2</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="116">
<![endif]-->
<div style="max-width: 116px; width:100%; display: inline-block; vertical-align: top;" class="fullWidth">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text1</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="350">
<![endif]-->
<div style="max-width: 349px; width:100%; display: inline-block; vertical-align: top;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">image</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, sans-serif;font-size:20px;">text</td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</tbody>
</table>
<!-- start 700 pixel container -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--></td>
</tr>
</table>
</body>
</html>uj5u.com熱心網友回復：
不要將布局設定在單個表格中，將它們分成兩個表格。內容表和影像表。
<style>
@media screen and (max-width: 600px) {
.module-wrapper, .grid{
width: 100% !important;
}
.grid{
float: none !important;
}
}
</style>
<table class="module-wrapper" cellpadding="0" cellspacing="0" border="0" width="580" align="center">
<tr>
<td>
<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" width="100%" dir="rtl"><tr><td valign="top" dir="ltr"><![endif]-->
<table class="grid" cellpadding="0" cellspacing="0" border="0" width="135" align="right">
<tr>
<td align="center" style="position: relative">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
???? ?????
</div>
</td>
</tr>
</table>
</td>
</tr>
</table><!-- #end image table -->
<!--[if mso]></td><td valign="top" dir="ltr"><![endif]-->
<table class="grid" role="presentation" cellpadding="0" cellspacing="0" width="445" align="left">
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0"
style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ?100 </span>
<span style="padding-left:8px"> ????</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>????</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">???</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span
style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;">
:???? ?????</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table><!-- #end content table -->
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</table><!-- #end module-wrapper -->然后使用媒體查詢使您的表格回應
如果您不想使用媒體查詢，請嘗試使用本文中的方法 https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919
uj5u.com熱心網友回復：
使用 php 如此簡單
$to = 'reciver';
$subject = 'subt';
$headers = "From: " . strip_tags($_POST['req-email']) . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['req-email']) . "\r\n";
$headers .= "CC: [email protected]\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
$message = '<p><strong>This is strong text</strong> while this is not.</p>'; // hear will be your ful structure in html in message variable.
//Then
mail($to, $subject, $message, $headers);
請確保您已使用此線路
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
uj5u.com熱心網友回復：
我嘗試為此使用 CSS 網格
#parent-container {
border: 0.2rem solid black;
padding: 1em;
display: grid;
grid-template-columns: repeat(2, 1fr);
place-content: center;
}
#parent-container img {
width: 100%;
height: auto;
border-radius: 0.3rem;
}
.first-container {
height: 100%;
display: grid;
grid-auto-rows: 1fr;
}
.first-container div:nth-child(1) {
display: grid;
grid-template-columns: repeat(2, 1fr);
place-items: center;
}
.first-container div:nth-child(2) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div:nth-child(3) {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
}
.first-container div>div:not(:last-child) {
border-right: 0.2rem solid black;
}
.first-container div {
display: grid;
gap: 0.5rem;
}
.second-container {
display: grid;
place-items: center;
border: 0.2rem solid black;
padding: 0.5em;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="parent-container">
<!-- first container-child -->
<div class="first-container">
<div>
<div>text1</div>
<div>text2</div>
</div>
<div>
<div>text3</div>
<div>text2</div>
<div>text1</div>
</div>
<div>
<div></div>
<div>text2</div>
<div>text1</div>
</div>
</div>
<!-- second container-child -->
<div class="second-container">
<img src="https://avatars.githubusercontent.com/u/87947051?v=4" alt="">
<div>text</div>
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/414737.html
標籤：
上一篇：使用python定期自動抓取網頁