gpt4 book ai didi

css - 如何使此元素在此代码中按应有的方式显示?

转载 作者:太空宇宙 更新时间:2023-11-04 01:44:14 24 4
gpt4 key购买 nike

我正在制作一封 HTML 电子邮件,并且我让大部分元素按应有的方式显示。但出于某种原因,我试图插入一个元素,一个带有地址和联系人的小框没有按应有的方式显示。 Screencap of file

底部带有地址的灰色条应该与主白框的宽度相同,并且应该被蓝色包围。

我的代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor= "#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor= "#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

但是,如果我将地址栏移到绿色和橙色框上方,地址栏似乎格式正确,HTML works when address is above

<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
</table>

我不确定为什么会这样,我该如何更改代码,使地址显示在绿色和橙色框下方,但与它上面的其余元素保持相同的宽度?

最佳答案

将地址行移动到取消订阅链接/社交媒体链接表并使其成为 colspan="2"。我希望这就是你所要求的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor="#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor="#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor="#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum
<!--do not delete-->&nbsp&nbsp&nbsp&nbsp
<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor="#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<td align="left" valign="top">
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center">
<!--this contains unsub link and copyright-->
<td bgcolor="#50B54D" width="60%">
unsub link
</td>
<td bgcolor="#EC552B" width="40%">
social media links
</td>
</tr>
<tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>

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

</html>

关于css - 如何使此元素在此代码中按应有的方式显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44864333/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com